Add Validation To A Web Form Using IGValidator

In this article, you will learn to Add Validation to a Web Form using IGValidator.

Introduction

Data validation is one of the most common but required functionalities in a modern Web page. Implementing data validation can be time-consuming for web developers. Infragistics provides a JavaScript validator control, IGValidator that can be used to validate a form’s input controls without writing too much code. It can be used with most of the common form input elements such as Input, Radio button, and Checkbox. This control provides a very high interactive design for success and failure of data validation and because it’s written in JavaScript, that makes it very efficient and easy to code. IGValidator provides various validation rules such as required field and data types such as number, date, card, email, and also custom type. IGValidator is a part of IgniteUI for JavaScript provided by Infragistics.

What we will Cover in this article

In this article, we’ll cover some of the common rules of input validation and how to apply them to various controls.

  • Required Validation
  • Compare Validation
  • Masking
  • Multi Selection in Dropdown
  • Ignite Date Picker with validation
  • Validate Common Controls (i.e textbox, dropdown, checkbox, datepicker etc. )

Let's get started

Before anything else, make sure you install Ignite UI for JavaScript and HTML 5.

Let’s start by creating a simple HTML page. You can use any tool of your choice. We’ll use an HTML page to implement validations so that you can implement in any project.

First, we need to add the CSS and CDN scripts provided by Infragistics as shown in Listing 1.

  1. <!--  CSS files -->  
  2. <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/ infragistics.theme.css" rel="stylesheet" />  
  3. <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />  
  4. <link href="https://www.igniteui.com/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>  
  5. <!--  Script files -->  
  6. <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>  
  7. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
  8. <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>  
  9.   
  10. <!--Ignite UI Required Combined JavaScript Files-->  
  11. <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"> </script>  
  12. <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.lob.js"></script>  

Listing 1

Required Validation

Now, let’s add two simple HTML input controls for First Name and Last Name to validate as shown in Listing 2.

  1. <form id="validationForm" action="" method="post">  
  2.         <div class="group-fields clearfix">  
  3.             <div class="odd">  
  4.                 <label>First name*</label>  
  5.                 <input class="group" type="text" id="firstName" />  
  6.             </div>  
  7.             <div class="even">  
  8.                 <label>Last name*</label>  
  9.                 <input class="group" type="text" id="lastName" />  
  10.             </div>  
  11.         </div>  
  12. </form>  

Listing 2

To validate controls in page, first we need to mark the form tag as igValidator then in fields option add those fields and their validation options. We also use a custom regex function which returns true if field has only uppercase or lowercase text. Refer to listing 3.

  1. $('#validationForm').igValidator({  
  2.         onsubmit: true,  
  3.         successMessage: "Valid",  
  4.         fields: [{  
  5.             required: true,  
  6.             selector: "#firstName",  
  7.             valueRange: [2],  
  8.             onblur: true,  
  9.             custom: function (value, fieldOptions) {  
  10.                 var myRegEx = /^[a-zA-Z]+$/;  
  11.                 var isValid = myRegEx.test(value);  
  12.                 return isValid;  
  13.             }  
  14.         },  
  15.         {  
  16.             required: true,  
  17.             selector: "#lastName",  
  18.             valueRange: [2],  
  19.             onblur: true,  
  20.             custom: function (value, fieldOptions) {  
  21.                      var myRegEx = /^[a-zA-Z]+$/;  
  22.                  var isValid = myRegEx.test(value);  
  23.                 return isValid;  
  24.                    }  
  25.                }]  
  26. );  

Listing 3

Hit save and open the HTML page in Web browser. Refer to Figure 1.

JavaScript
Figure 1 

Compare Validation

To check if two input fields have the same values or not, we use compare validation.

Let’s add two common fields which mostly use comparison validation like password as shown in Listing 4

  1. <div class="group-fields clearfix">  
  2.           <div class="odd">  
  3.                <label>Create password*</label>  
  4.                <input class="group" type="password" id="createPassword" />  
  5.           </div>  
  6.           <div class="even">  
  7.                <label>Confirm password*</label>  
  8.                <input class="group" type="password" id="confirmPassword" />  
  9.           </div>  
  10.  </div>   

Listing 4.

Let's add javascript to make the password and the confirm password work and also add the regex for password strength as shown in Listing 5.

  1.  $('#validationForm').igValidator({  
  2.          onsubmit: true,  
  3.          successMessage: "Valid",  
  4.          fields: [  
  5.  {  
  6.                     required: true,  
  7.                     selector: "#createPassword",  
  8.                     onblur: true,  
  9.                     errorMessage: "Should contain at least 8 characters, 1 number, 1 lowercase   
  10. character (a-z), 1 uppercase character",  
  11.                     custom: function(value, fieldOptions){  
  12.                         var myRegEx  = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/;  
  13.                         var isValid = myRegEx.test(value);  
  14.                         return isValid;  
  15.                     }  
  16.                 },  
  17.                 {  
  18.                     required: true,  
  19.                     selector: "#confirmPassword",  
  20.                     equalTo: "#createPassword",  
  21.                     onblur: true,  
  22.                 }]  
  23. });  

Listing 5

JavaScript
Figure 2

Masking

We can mask any input field using IgMasking.

Let’s say we have to mask a phone number, add another input field as shown in Listing 6.

  1. <div class="even">  
  2.    <label>Mobile phone</label>  
  3.    <input class="group" type="text" id="phone" />  
  4. </div>  

Listing 6

After adding Html, we can write 3 lines of code to implement masking as shown in Listing 7. This code is simply placed in load function of the page.

  1. $("#phone").igMaskEditor({  
  2. inputMask: "(\+\\91) 0000-000000" });  

Listing 7

The output is like Figure 3.

JavaScript
Figure 3 

Multi Selection in Dropdown

First let's add simple div in html with id as shown in Listing 7.

  1. <div class="odd">  
  2.             <label>Your interests (Select at least 2)*</label>  
  3.             <div id='igComboInterests'></div>  
  4.         </div>  

Listing 7

Now let’s create some data and then bind that data to a div and then enable multi selection feature as shown in Listing 8.

  1. var data = [  
  2.               { ID: "ID101", Name: "Business", Code: 101 },  
  3.               { ID: "ID102", Name: "Cooking", Code: 102 },  
  4.               { ID: "ID103", Name: "Fashion", Code: 103 },  
  5.               { ID: "ID104", Name: "Lifestyle", Code: 104 },  
  6.               { ID: "ID105", Name: "Photography", Code: 105 },  
  7.               { ID: "ID106", Name: "Sports", Code: 106 }];  
  8.   
  9.             $('#igComboInterests').igCombo({  
  10.               inputName: "products",  
  11.               dataSource: data,  
  12.               allowCustomValue: true,  
  13.               textKey: 'Name',  
  14.               valueKey: "ID",  
  15.               multiSelection: {  
  16.                   enabled: true  
  17.               }  
  18.           });  
  19.   
  20. ('#validationForm').igValidator({  
  21.        onsubmit: true,  
  22.        successMessage: "Valid",  
  23.        fields: [  
  24. required: true,  
  25.     selector: "#igComboInterests",  
  26.     onchange: true,  
  27.     lengthRange: [2]]  
  28. ;  

Listing 8

The output will be like in Figure 4.

JavaScript
Figure 4 

Ignite Date Picker with validation

Let’s add input tag inside div as shown in Listing 9.

  1. <div class="odd">  
  2.      <label>Date of birth*</label>  
  3.      <input class="group" id="dateOfBirth" />  
  4. </div>  

Listing 9

Now add javascript for Ignite DatePicker and validation as in Listing 10. When we mark an input as igDatePicker, it restricts user to enter text in a field by default. We can also set minimum and maximum date for DatePicker.

  1. $("#dateOfBirth").igDatePicker({  
  2.                datepickerOptions: { minDate: new Date(1920, 0, 1), maxDate: new Date() }  
  3.            });  
  4.   
  5. $('#validationForm').igValidator({  
  6.         onsubmit: true,  
  7.         successMessage: "Valid",  
  8.         fields: [  
  9.   
  10.                 required: true,  
  11.                 selector: "#dateOfBirth",  
  12.                 date: true,  
  13.                 onblur: true  
  14.             }]  
  15. );  

Listing 10

When you click on the datepicker default Infragistic Date will pop up. Refer to Figure 5.

JavaScript
Figure 5 

To make the form look better I’ve also added some CSS to the form which is as shown in Listing 11.

  1. <style>  
  2.        .group-fields {  
  3.            margin-bottom:20px;  
  4.        }  
  5.        .group-fields .odd {  
  6.            float:left;  
  7.            width:262px;  
  8.        }  
  9.        .group-fields .even{  
  10.            float:left;  
  11.            margin-left:20px;  
  12.        }  
  13.        .group-fields label {  
  14.            display: block;  
  15.            line-height: 20px;  
  16.            font-family: 'Open Sans',Arial,sans-serif;  
  17.            font-size: 13px;  
  18.        }  
  19.        .group-fields .ui-igedit-container {  
  20.            box-sizing: content-box;  
  21.        }  
  22.        .group-fields input.group {  
  23.            width:258px;  
  24.            height:32px;  
  25.        }  
  26.        .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {  
  27.            width:260px;  
  28.            height:34px;  
  29.        }  
  30.        .group-fields .ui-igpopover {  
  31.            width:260px;  
  32.        }  
  33.        .group-fields input.group {  
  34.            border-style: solid;  
  35.            border-width: 1px;  
  36.            border-color:#bcbcbc;  
  37.        }  
  38.        .group-fields input.group:hover {  
  39.            border-color:#444;  
  40.        }  
  41.        .group-fields .ui-widget.ui-ignotify.ui-ignotify-inline {  
  42.            margin-bottom:0;  
  43.        }  
  44.        .group-fields input.group.ui-ignotify-error {  
  45.            border-color:#f33;  
  46.        }  
  47.        #igCheckboxAccept, #igCheckboxSubscribe {  
  48.            float:left;  
  49.            margin-right: 5px;  
  50.        }  
  51.        .group-fields .inline {  
  52.            display:inline;  
  53.        }  
  54.        .clearfix:after {  
  55.            content: "";  
  56.            display: table;  
  57.            clear: both;  
  58.        }  
  59.        @media screen and (max-width:610px) {  
  60.            .group-fields .odd {  
  61.                float:left;  
  62.                width:202px;  
  63.            }  
  64.            .group-fields input.group {  
  65.                width:200px;  
  66.            }  
  67.            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {  
  68.                width:202px;  
  69.            }  
  70.            .group-fields .ui-igpopover {  
  71.                width:202px;  
  72.            }  
  73.        }  
  74.        @media screen and (max-width:478px) {  
  75.            .group-fields {  
  76.                margin-bottom:0;  
  77.            }  
  78.            .group-fields .odd, .group-fields .even {  
  79.                margin-bottom: 5px;  
  80.            }  
  81.            .group-fields .odd {  
  82.                float:none;  
  83.                width:262px;  
  84.            }  
  85.            .group-fields .even {  
  86.                margin-left:0;  
  87.            }  
  88.            .group-fields input.group {  
  89.                width:258px;  
  90.                height:32px;  
  91.            }  
  92.            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {  
  93.                width:260px;  
  94.                height:34px;  
  95.            }  
  96.            .group-fields .ui-igpopover {  
  97.             width:260px;  
  98.             }  
  99.        }  
  100.    </style>  

Listing 11

Validate Common Controls

To merge all controls of Html and Javascript refer to Listing 12 & Listing 13.

  1. <form id="validationForm" action="" method="post">  
  2.         <div class="group-fields clearfix">  
  3.             <div class="odd">  
  4.                 <label>First name*</label>  
  5.                 <input class="group" type="text" id="firstName" />  
  6.             </div>  
  7.             <div class="even">  
  8.                 <label>Last name*</label>  
  9.                 <input class="group" type="text" id="lastName" />  
  10.             </div>  
  11.         </div>  
  12.         <div class="group-fields clearfix">  
  13.             <div class="odd">  
  14.                 <label>Email*</label>  
  15.                 <input class="group" type="text" id="email" />  
  16.             </div>  
  17.             <div class="even">  
  18.                 <label>Mobile phone</label>  
  19.                 <input class="group" type="text" id="phone" />  
  20.             </div>  
  21.         </div>  
  22.         <div class="group-fields clearfix">  
  23.             <div class="odd">  
  24.                 <label>Create password*</label>  
  25.                 <input class="group" type="password" id="createPassword" />  
  26.             </div>  
  27.             <div class="even">  
  28.                 <label>Confirm password*</label>  
  29.                 <input class="group" type="password" id="confirmPassword" />  
  30.             </div>  
  31.         </div>  
  32.         <div class="group-fields clearfix">  
  33.             <div class="odd">  
  34.                 <label>Date of birth*</label>  
  35.                 <input class="group" id="dateOfBirth" />  
  36.             </div>  
  37.             <div class="even">  
  38.                 <label>Gender*</label>  
  39.                 <input id='gender' />  
  40.             </div>  
  41.         </div>  
  42.         <div class="group-fields clearfix">  
  43.             <div class="odd">  
  44.                 <label>Your interests (Select at least 2)*</label>  
  45.                 <div id='igComboInterests'></div>  
  46.             </div>             
  47.         </div>  
  48.         <div class="group-fields clearfix">  
  49.             <div class="odd">  
  50.                 <label class="inline">I accept the Terms and Conditions *</label>  
  51.                 <div id="igCheckboxAccept"></div>  
  52.             </div>  
  53.             <div class="even">  
  54.                 <label class="inline">Subscribe for our daily mail digest</label>  
  55.                 <div id="igCheckboxSubscribe"></div>  
  56.             </div>  
  57.         </div>  
  58.         <input type="submit" value="Sign Up" />  
  59.     </form>  

Listing 12

  1. <script>  
  2.         $(function () {  
  3.             var data = [  
  4.                 { ID: "ID101", Name: "Business", Code: 101 },  
  5.                 { ID: "ID102", Name: "Cooking", Code: 102 },  
  6.                 { ID: "ID103", Name: "Fashion", Code: 103 },  
  7.                 { ID: "ID104", Name: "Lifestyle", Code: 104 },  
  8.                 { ID: "ID105", Name: "Photography", Code: 105 },  
  9.                 { ID: "ID106", Name: "Sports", Code: 106 }];  
  10.   
  11.             $('#gender').igTextEditor({  
  12.                 inputName: "gender",  
  13.                 listItems: ["Male""Female"]  
  14.             });  
  15.   
  16.             $("#phone").igMaskEditor({  
  17.                 inputMask: "(\\0\\01) 000-0000"  
  18.             });  
  19.   
  20.             $('#igComboInterests').igCombo({  
  21.                 inputName: "products",  
  22.                 dataSource: data,  
  23.                 allowCustomValue: true,  
  24.                 textKey: 'Name',  
  25.                 valueKey: "ID",  
  26.                 multiSelection: {  
  27.                     enabled: true  
  28.                 }  
  29.             });  
  30. ….            
  31.   
  32.             $("#dateOfBirth").igDatePicker({  
  33.                 datepickerOptions: { minDate: new Date(1920, 0, 1), maxDate: new Date(2015, 0, 1) }  
  34.             });  
  35.   
  36.            $("#igCheckboxAccept").igCheckboxEditor();  
  37.            $("#igCheckboxSubscribe").igCheckboxEditor();  
  38.            $('#validationForm').igValidator({  
  39.                 onsubmit: true,  
  40.                 successMessage: "Valid",  
  41.                 fields: [{  
  42.                     required: true,  
  43.                     selector: "#firstName",  
  44.                     valueRange: [2],  
  45.                     onblur: true,  
  46.                     custom: function (value, fieldOptions) {  
  47.                         var myRegEx = /^[a-zA-Z]+$/;  
  48.                         var isValid = myRegEx.test(value);  
  49.                         return isValid;  
  50.                     }  
  51.                 },  
  52.                 {  
  53.                     required: true,  
  54.                     selector: "#lastName",  
  55.                     valueRange: [2],  
  56.                     onblur: true,  
  57.                     custom: function (value, fieldOptions) {  
  58.                         var myRegEx = /^[a-zA-Z]+$/;  
  59.                         var isValid = myRegEx.test(value);  
  60.                         return isValid;  
  61.                     }  
  62.                 },  
  63.                 {  
  64.                     required: true,  
  65.                     selector: "#dateOfBirth",  
  66.                     date: true,  
  67.                     onblur: true  
  68.                 },  
  69.                 {  
  70.                     required: true,  
  71.                     selector: "#gender",  
  72.                     gender: true,  
  73.                     onblur: true  
  74.                 },  
  75.                 {  
  76.                     required: true,  
  77.                     selector: "#email",  
  78.                     email: true,  
  79.                     onblur: true  
  80.                 },  
  81.                 {  
  82.                     required: true,  
  83.                     selector: "#createPassword",  
  84.                     onblur: true,  
  85.                     errorMessage: "Should contain at least 8 characters, 1 number, 1 lowercase   
  86. character (a-z), 1 uppercase character",  
  87.                     custom: function(value, fieldOptions){  
  88.                         var myRegEx  = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/;  
  89.                         var isValid = myRegEx.test(value);  
  90.                         return isValid;  
  91.                     }  
  92.                 },  
  93.                 {  
  94.                     required: true,  
  95.                     selector: "#confirmPassword",  
  96.                     equalTo: "#createPassword",  
  97.                     onblur: true,  
  98.                 },                  
  99.                 {  
  100.                     required: true,  
  101.                     selector: "#igComboInterests",  
  102.                     onchange: true,  
  103.                     lengthRange: [2]  
  104.                 },  
  105.                 {  
  106.                     required: true,  
  107.                     required: true,  
  108.                     selector: "#igCheckboxAccept",  
  109.                     onchange: true  
  110.                 },  
  111.                 {  
  112.                     selector: "#igCheckboxSubscribe",  
  113.                     onchange: true  
  114.                 }  
  115.                 ]  
  116.             });  
  117.         });  
  118.     </script>  

Listing 13

The final output of the code will like Figure 6.

JavaScript
Figure 6 

Conclusion

IGValidator provides an easy and simple way to implement data validations in HTML and web pages using JavaScript. It also helps to maintain a centralized method to validate the entire web page. In this article, I have demonstrated how to control IGValidator to validate various input controls on a web page.