In this article I am explaining how to access ASP.Net Validation controls in Client Side languages like JavaScript.
Trigger ASP.Net Validations using JavaScript
UserName: <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valName" ControlToValidate = "txtName"
runat="server" ErrorMessage="*Required" />
<br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valEmail" ControlToValidate = "txtEmail"
runat="server" ErrorMessage="*Required" />
<input id="btnSave" type="button" value="Save" onclick = "VerifyAndSave()" />
Above I am validating two textboxes using ASP.Net RequiredFieldValidators. But since I want the RequiredFieldValidators to perform validation when triggered by JavaScript I am calling the following JavaScript function on click event of the HTML button.
<script type = "text/javascript">
function VerifyAndSave() {
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
}
if (Page_IsValid) {
alert("Validations successful");
//do something
}
}
</script>
Trigger Grouped ASP.Net Validations using JavaScript
UserName: <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valName" ValidationGroup = "Group1"
ControlToValidate = "txtName" runat="server" ErrorMessage="*Required" />
<br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valEmail" ValidationGroup = "Group1"
ControlToValidate = "txtEmail" runat="server" ErrorMessage="*Required" />
<br />
City: <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valCity" ValidationGroup = "Group2"
ControlToValidate = "txtName" runat="server" ErrorMessage="*Required" />
<br />
Country: <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valCountry" ValidationGroup = "Group2"
ControlToValidate = "txtEmail" runat="server" ErrorMessage="*Required" />
<br />
<input id="btnGroup1" type="button" value="Validate Group1"
onclick = "VerifyAndSave('Group1')" />
<input id="btnGroup2" type="button" value="Validate Group1"
onclick = "VerifyAndSave('Group2')" />
Above I have placed two Groups of RequiredFieldValidators and two validate these Groups I have placed two HTML Buttons which call the following JavaScript method.
The method below accepts the GroupName as paramters and triggers the validation for the Group
<script type = "text/javascript">
function VerifyAndSave(groupName) {
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate(groupName);
}
if (Page_IsValid) {
alert(groupName + "Validations successful");
//do something
}
}
</script>
Enable / Disable ASP.Net Validators using JavaScript
UserName: <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valName" ValidationGroup = "Group1"
ControlToValidate = "txtName" runat="server" ErrorMessage="*Required" />
<br />
Enable Validation: <input type = "checkbox" id = "chk" onclick = "ToggleValidator(this);" />
<br />
<input id="btnSave" type="button" value="Save" onclick = "VerifyAndSave()" />
Here I have placed two ASP.Net Validation Controls that are enabled or disabled using a CheckBox using the below JavaScript functions. If the CheckBox is checked, the Validators are enabled and if it is unchecked the Validators are disabled.
<script type = "text/javascript">
function VerifyAndSave() {
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
}
if (Page_IsValid) {
alert("Validations successful");
//do something
}
}
function ToggleValidator(chk) {
var valName = document.getElementById("<%=valName.ClientID%>");
if (chk.checked) {
ValidatorEnable(valName, true);
}
else {
ValidatorEnable(valName, false);
}
}
</script>
With this the article comes to an end. You can download the source using the link below.
AccessingASP.NetValidatorsinJavaScript.zip