Calling ASP.Net validators from JavaScript

There are situations when we want to call Asp.net validatiors form JavaScript. One such situation is when we want to close a pop up window on button click using window.close(). But before closing the window using JavaScript, we want to validate the data written in the controls of the window.

It possible to call Asp.net validators from JavaScript. The following code shows a portion of asp.net page which includes one standard .net required field validator and one regular expression validator.

<table>

<tr>

<td><asp:Label ID=”lbl1″ runat=”server” Text=”Please enter a digit”></asp:Label></td>

<td><asp:TextBox ID=”txtbox1″ runat=”server”></asp:TextBox></td>

<td><asp:RequiredFieldValidator ID=”valReq” ControlToValidate=”txtbox1″ runat=”server” ErrorMessage=”*” Display=”Dynamic”>
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID=”valreg” ControlToValidate=”txtbox1″ runat=”server” ErrorMessage=”Not valid character” ValidationExpression=”[0-9]”>
</asp:RegularExpressionValidator></td>

</tr>

<tr>

<td></td>
<td><asp:Button ID=”btn1″ runat=”server” Text=”Submit” OnClientClick=”performCheck()”/></td> <td></td>

</tr>

</table>

In design mode, it looks as below

View in design mode

Now we want to make sure that .net validators get fired up on “Submit” button click before closing the window using javascript window.close(). In our example, we have a text box where we expect a single digit before closing the window.

All we have to do to fire up .net validators is to call “Page_ClientValidate()” function.  The following JavaScript code shows how “Page_ClientValidate()” function can be used before closeing window.

<script type=”text/javascript” language=”javascript”>

function performCheck()
{

if(Page_ClientValidate())
{

window.close();

}

}
</script>

Now, if the Submit button is clicked leaving the text box empty, the required field validator will fire up as shown in the below screen shot.

Required field validotor fires up

If any thing is written in other than a single digit, we will get the following output.

Regular Expression Validator fires up

How about Calling any specific validator rather than all?

Well, this can be done as well. In this case we need to provide a ValidationGroup name for the validator and pass the validator group name to Page_ClientValidate() function as parameter. The following code segment shows a group name is provided for the required field validator and passed it to Page_ClientValidate() function. In this case, only required field validatior will be fired up and not the regular expression validator.

<table>

<tr>

<td><asp:Label ID=”lbl1″ runat=”server” Text=”Please enter a digit”></asp:Label></td>
<td><asp:TextBox ID=”txtbox1″ runat=”server”></asp:TextBox></td>
<td><asp:RequiredFieldValidator ID=”valReq” ControlToValidate=”txtbox1″ runat=”server”
ErrorMessage=”*” ValidationGroup=”Required” Display=”Dynamic”>
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID=”valreg” ControlToValidate=”txtbox1″ runat=”server”
ErrorMessage=”Not valid character” ValidationExpression=”[0-9]” ValidationGroup=”RegExpression”>
</asp:RegularExpressionValidator></td>

</tr>

<tr>

<td></td>
<td><asp:Button ID=”btn1″ runat=”server” Text=”Submit” OnClientClick=”performCheck()”/></td>
<td></td>

</tr>

</table>

<script type=”text/javascript” language=”javascript”>
function performCheck()
{

if(Page_ClientValidate(“Required”))
{

window.close();

}

}
</script>

Advantage

By using standard asp.net validators for validation, we don’t have to write JavaScript code to do the validation. This can minimize the development time to a great extent.