Skip navigation

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

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

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

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.

About these ads

18 Comments

  1. Thanks, this was a useful article to me; I was going to write a lot of javascript for my situation

  2. Awesome. This was just what I needed. Thanks for the article.

  3. I’m trying to call a required field validator and get the following error … m[2] is undefined. Only happens in FireFox. Is this a bug in the scriptresource.axd?

    • I just tried it in Firefox…got no error.

      • your right, it happens on a custom validator only when calling it from the client side …

        • razeeb
        • Posted June 19, 2009 at 7:08 pm
        • Permalink

        Hi Greg,

        the custom validator has a “ClientValidationFunction” property where you can assign a javascript function to validate it. The required field validator knows how to validate, the regular expression validator knows how to validate by its “ValidationExpression” property. But the custom validator don’t know how to validate. That’s why we are required to provide a function either on the server side or on the client side.

        I think the reason you are getting this error is that you are not using the client side function properly. You will have to set the isValid property to “true” or “false” in the client side function. To know details about how to use client side function for custom validator please follow the link — http://www.4guysfromrolla.com/articles/073102-1.aspx

        Hopefully, this will solve your problem.

        Thanks.
        Razeeb

  4. Exact piece of code what I was searching for …It works like a charm … Thanks a lot.

  5. Great article, solved my problem for me.

  6. That’s what I needed … thanks

  7. awsome! thanks! =)

  8. Saved Me ….

  9. Thanks,its working great…….

  10. I m using to validator first “required field validator” that is working well but second validator is regular expression validator in which i want to check whether textbox is containing alphabate then regular expression should work. I m using following rgexpr =”^\s*[a-zA-Z,\s]+\s*$” but it generate sql are as follows
    Input string was not in a correct format.
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.FormatException: Input string was not in a correct format.

  11. thanks alot

  12. You hit the nail right! Thanks for the wonderful and extremely useful article.

  13. Great Post, Worked nice !! Thanks.

  14. Thank you it’s working your saved me

  15. Thanks,It worked. .


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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: