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.

body {  
     font: 62.5% "Trebuchet MS", sans-serif;  
}  
.custom-error {  
    z-index: 1000;  
    position: absolute;  
    background-color: white;  
    color: red;  
    border: 1px solid gray;  
    padding: 3px;  
    font: 62.5% "Trebuchet MS", sans-serif;  
    border-radius: 5px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    font-size: 1.1em;  
    font-family: Verdana,Arial,sans-serif;  
}  

The following is the demo page that is the index.html file:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>jQuery.mbValidation Demo</title>  
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>  
        <script type="text/javascript" src="Scripts/jquery-ui.js"></script>  
        <script type="text/javascript" src="Scripts/jQuery.mbValidations.js"></script>  
        <link rel="stylesheet" type="text/css" href="Styles/mb-ui.css"/>  
        <link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css"/>  
    </head>  
    <body>  
        <center>  
            <h2>jQuery.mbValidation Plugin Demo 1.0</h2>  
                 <table style="font-size: 1.1em;font-family: Verdana,Arial,sans-serif;padding:1em">  
                <tr>  
                    <td>  
                        <label>Enter Number Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField1" class="text ui-widget-content ui-corner-all required" />  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Alphabet Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField2" class="text ui-widget-content ui-corner-all required" />  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Number or Alphabet Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField3"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Text Having Length 8 Here:</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField4"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Text With Minimum Length 3 Here:</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField9"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Amount Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField5"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Email Id Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField6"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <label>Enter Contact Number Here :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField7"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                     <tr>  
                    <td>  
                        <label>Enter Data For Required Field :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField8"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                 <tr>  
                    <td>  
                        <label>Enter URL :</label>  
                    </td>  
                    <td>  
                        <input type="text" id="txtDemoField10"  class="text ui-widget-content ui-corner-all required"/>  
                    </td>  
                </tr>  
                <tr>  
                    <td style="text-align:center">  
                        <input type="checkbox" id="txtDemoField11" name="accept" value="accept" class="required">I Agree  
                    </td>  
                </tr>  
                 <tr>  
                    <td>  
                         
                    </td>  
                    <td>  
                        <button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button>  
                        <button id="btnClear" type="button" onClick="ClearRequiredMark();">Clear</button>  
                    </td>  
                </tr>  
            </table>  
        </center>  
         <script type="text/javascript">  
             $(document).ready(function () {  
                 $("#txtDemoField1").ForceOnlyNumeric();  
                 $("#txtDemoField2").ForceOnlyAlpha();  
                 $("#txtDemoField3").ForceOnlyAlphaNumeric();  
                 $("#txtDemoField4").MaxLength(8);  
                 $("#txtDemoField5").ForceAmount();  
                 $("#txtDemoField6").ForceEmail();  
                 $("#txtDemoField7").ForceContactNumber();  
                 $("#txtDemoField9").MinLength(3);  
                 $("#txtDemoField10").ForceURL();  
             });  
             $(function () {  
                 $("#btnValidate").button();  
                 $("#btnClear").button();  
             });  
         </script>  
    </body>  
</html>  

For required field validation specify class=”required” for input and call PerformValidations() on the button’s onClick event.

<input type="text" id="txtDemoField1" class="required" />  
<button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button> 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s