We use the server side control in ASP.NET and for validating them, we use the server validation control. These ASP.NET validation controls provide functionality to perform validation using client script but these are handled at the end of the page by rendered validation script. When we want to post the data by AJAX or JavaScript that time Validation control won’t fire the validation because we are preventing the script to move ahead by returning the page there itself. If page process till the end of the page then script will execute and validation would be fired.
By default, when client-side validation is being performed, the user cannot post the page to the server if there are errors on the page thus the user experience with the page is enhanced.
There are some Client-side objects and Client-side APIs which help us to use client side validation using ASP.NET server controls from JavaScript :
1. Page_IsValid:
It is a boolean Variable which represents whether the page is currently valid or not.
1 2 3 4 5 6 7 8 9 | <script> if(Page_IsValid) alert("Page is valid. Go ahead."); else { alert("Page is invalid"); return false; } </script> |
2. Page_Validators
It’s an Array of elements which represents an array containing all of the validators on the page.
3. isvalid
It is a Boolean property of each client validator indicates the validator’s validity.
4. Page_ValidationActive
It is a boolean variable which is used for enabling or disabling the validation on the page programmatically.
5. Page_ValidationSummaries
It is an array containing of all of the validation summaries on the page.
Methods
1. ValidatorValidate(validator)
It takes client-validator as its input parameter and check this validator and update its display.
2. ValidatorEnable(validator, enable)
Takes 2 parameters: client validator and boolean value to enable or disable
It is used to enable or disable a client validator. On disable, validator will not be evaluating the validator.
3. ValidatorHookupControl(control, validator)
Takes 2 parameters: HTML element as control and client validator
It is used to modifies or creates the element’s change event so that it updates the validator when changed. This can be useful for custom validators that depend on multiple input values.
4. Page_ClientValidate(validatorGrp)
Takes 1 parameter : Validation group name
Return : bool value
It is used to validate all validator of that given validation group and returns bool value.
Example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div> Example <p> <asp:Label ID="lblzipcode" runat="server">ZipCode:</asp:Label> <asp:TextBox ID="txtzipcode" runat="server" CssClass="txtbox"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvtxtzipcode" runat="server" ControlToValidate="txtzipcode" CssClass="error" ErrorMessage="Zipcode is required." ToolTip="Zipcode is required." ValidationGroup="save">*</asp:RequiredFieldValidator> </p> <p class="btnSubmit"> <asp:Button ID="btnSubmit" runat="server" CommandName="Save" Text="Save" ValidationGroup="save" OnClientClick="saveData();" /> </p> </div> |
Check Validation group
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> function saveData() { Page_ClientValidate("save"); if (Page_IsValid) { alert('it is valid'); return true; } else { alert('No valid'); return false; } } </script> |
In alternate way, we can use like this
1 2 3 4 5 6 7 8 9 10 11 12 | <script> function saveData() { if (Page_ClientValidate("save")) { alert('it is valid'); return true; } else { alert('No valid'); return false; } } </script> |
Enable/Disable Validator using javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> function saveData() { // we can place the condition based enable/disable validator ValidatorEnable(document.getElementById('<%=txtzipcode.ClientID%>'), false); if (Page_ClientValidate("save")) { alert('it is valid'); return true; } else { alert('No valid'); return false; } } </script> |
Other properties and methods
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> function saveData() { if (checkValidation("save")) { alert('it is valid'); return true; } else { alert('No valid'); return false; } } function checkValidation(valGrp) { var rtnVal = true; for (i = 0; i < Page_Validators.length; i++) { if (Page_Validators[i].validationGroup == valGrp) { ValidatorValidate(Page_Validators[i]); if (!Page_Validators[i].isvalid) { rtnVal = false; break; //exit for-loop, we are done. } } } return rtnVal; } </script> |