Post
Ask Question

jQuery Validation Plugin to Validate Web Forms

 

Introduction

This article presents an example of using the jQuery.mbValidation plugin. Click here for the Live Demo of the jQuery.mbValidation plugin.

Background

The jQuery.mbValidation Plugin is an excellent tool for web pages to validate data entries at the client side using JavaScript. It is very easy to integrate this plugin into your web application and do many validations on web forms. This is an Open Source project I have begun on Github for easy web application development, to simplify web page validations and to get maximum output with less coding.

Validation Properties

  • ForceOnlyNumeric: This property used to allow only numbers or numeric values in input field.
  • ForceOnlyAlpha: This property used to allow only alphabets or numeric values in input field.
  • ForceOnlyAlphaNumeric: This property used to allow only alphabets and numbers or alpha/numeric values in input field.
  • MaxLength(Number): This property used to restrict maximum length of value in input field.
  • ForceAmount: This property used to validate amount values in input field.
  • ForceEmail: This property used to validate Email Id in input field.
  • ForceContactNumber: This property used to validate contact number in input field.
  • MinLength(Number): This property used to validate minimum length in input field.
  • ForceURL: This property used to validate URL in input field.

Code

The structure of the attached Microsoft Visual Studio 2012 solution is as follows:
 
 
 
The jQuery.mbValidation Plugin relies on jQuery plugin to work, so I included the jquery-1.10.2.js file in the Scripts folder. You can also use the Compressed jQuery file that is jquery.min.js. I have added jquery-ui.css for the demo page and mb-ui.css that is required for the jQuery.mbValidatioin plugin.
 
Here is the structure of the mb-ui.css file. You can customize the jQuery.mbValidation plugin error message by modifying this CSS file.
  1. body {  
  2.      font: 62.5% "Trebuchet MS", sans-serif;  
  3. }  
  4. .custom-error {  
  5.     z-index: 1000;  
  6.     position: absolute;  
  7.     background-color: white;  
  8.     color: red;  
  9.     border: 1px solid gray;  
  10.     padding: 3px;  
  11.     font: 62.5% "Trebuchet MS", sans-serif;  
  12.     border-radius: 5px;  
  13.     -moz-border-radius: 5px;  
  14.     -webkit-border-radius: 5px;  
  15.     font-size: 1.1em;  
  16.     font-family: Verdana,Arial,sans-serif;  
  17. } 
The following is the demo page that is the index.html file:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>jQuery.mbValidation Demo</title>  
  5.         <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>  
  6.         <script type="text/javascript" src="Scripts/jquery-ui.js"></script>  
  7.         <script type="text/javascript" src="Scripts/jQuery.mbValidations.js"></script>  
  8.         <link rel="stylesheet" type="text/css" href="Styles/mb-ui.css"/>  
  9.         <link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css"/>  
  10.     </head>  
  11.     <body>  
  12.         <center>  
  13.             <h2>jQuery.mbValidation Plugin Demo 1.0</h2>  
  14.                  <table style="font-size: 1.1em;font-family: Verdana,Arial,sans-serif;padding:1em">  
  15.                 <tr>  
  16.                     <td>  
  17.                         <label>Enter Number Here :</label>  
  18.                     </td>  
  19.                     <td>  
  20.                         <input type="text" id="txtDemoField1" class="text ui-widget-content ui-corner-all required" />  
  21.                     </td>  
  22.                 </tr>  
  23.                 <tr>  
  24.                     <td>  
  25.                         <label>Enter Alphabet Here :</label>  
  26.                     </td>  
  27.                     <td>  
  28.                         <input type="text" id="txtDemoField2" class="text ui-widget-content ui-corner-all required" />  
  29.                     </td>  
  30.                 </tr>  
  31.                 <tr>  
  32.                     <td>  
  33.                         <label>Enter Number or Alphabet Here :</label>  
  34.                     </td>  
  35.                     <td>  
  36.                         <input type="text" id="txtDemoField3"  class="text ui-widget-content ui-corner-all required"/>  
  37.                     </td>  
  38.                 </tr>  
  39.                 <tr>  
  40.                     <td>  
  41.                         <label>Enter Text Having Length 8 Here:</label>  
  42.                     </td>  
  43.                     <td>  
  44.                         <input type="text" id="txtDemoField4"  class="text ui-widget-content ui-corner-all required"/>  
  45.                     </td>  
  46.                 </tr>  
  47.                 <tr>  
  48.                     <td>  
  49.                         <label>Enter Text With Minimum Length 3 Here:</label>  
  50.                     </td>  
  51.                     <td>  
  52.                         <input type="text" id="txtDemoField9"  class="text ui-widget-content ui-corner-all required"/>  
  53.                     </td>  
  54.                 </tr>  
  55.                 <tr>  
  56.                     <td>  
  57.                         <label>Enter Amount Here :</label>  
  58.                     </td>  
  59.                     <td>  
  60.                         <input type="text" id="txtDemoField5"  class="text ui-widget-content ui-corner-all required"/>  
  61.                     </td>  
  62.                 </tr>  
  63.                 <tr>  
  64.                     <td>  
  65.                         <label>Enter Email Id Here :</label>  
  66.                     </td>  
  67.                     <td>  
  68.                         <input type="text" id="txtDemoField6"  class="text ui-widget-content ui-corner-all required"/>  
  69.                     </td>  
  70.                 </tr>  
  71.                 <tr>  
  72.                     <td>  
  73.                         <label>Enter Contact Number Here :</label>  
  74.                     </td>  
  75.                     <td>  
  76.                         <input type="text" id="txtDemoField7"  class="text ui-widget-content ui-corner-all required"/>  
  77.                     </td>  
  78.                 </tr>  
  79.                      <tr>  
  80.                     <td>  
  81.                         <label>Enter Data For Required Field :</label>  
  82.                     </td>  
  83.                     <td>  
  84.                         <input type="text" id="txtDemoField8"  class="text ui-widget-content ui-corner-all required"/>  
  85.                     </td>  
  86.                 </tr>  
  87.                  <tr>  
  88.                     <td>  
  89.                         <label>Enter URL :</label>  
  90.                     </td>  
  91.                     <td>  
  92.                         <input type="text" id="txtDemoField10"  class="text ui-widget-content ui-corner-all required"/>  
  93.                     </td>  
  94.                 </tr>  
  95.                 <tr>  
  96.                     <td style="text-align:center">  
  97.                         <input type="checkbox" id="txtDemoField11" name="accept" value="accept" class="required">I Agree  
  98.                     </td>  
  99.                 </tr>  
  100.                  <tr>  
  101.                     <td>  
  102.                          
  103.                     </td>  
  104.                     <td>  
  105.                         <button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button>  
  106.                         <button id="btnClear" type="button" onClick="ClearRequiredMark();">Clear</button>  
  107.                     </td>  
  108.                 </tr>  
  109.             </table>  
  110.         </center>  
  111.          <script type="text/javascript">  
  112.              $(document).ready(function () {  
  113.                  $("#txtDemoField1").ForceOnlyNumeric();  
  114.                  $("#txtDemoField2").ForceOnlyAlpha();  
  115.                  $("#txtDemoField3").ForceOnlyAlphaNumeric();  
  116.                  $("#txtDemoField4").MaxLength(8);  
  117.                  $("#txtDemoField5").ForceAmount();  
  118.                  $("#txtDemoField6").ForceEmail();  
  119.                  $("#txtDemoField7").ForceContactNumber();  
  120.                  $("#txtDemoField9").MinLength(3);  
  121.                  $("#txtDemoField10").ForceURL();  
  122.              });  
  123.              $(function () {  
  124.                  $("#btnValidate").button();  
  125.                  $("#btnClear").button();  
  126.              });  
  127.          </script>  
  128.     </body>  
  129. </html> 
For required field validation specify class="required" for input and call PerformValidations() on the button's onClick event.
  1. <input type="text" id="txtDemoField1" class="required" />  
  2. <button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button> 

Contribute

To contribute FORK jQuery.mbValidatioin Plugin on Github.


Similar Articles