Wednesday, February 13, 2008 4:49 PM srkirkland

using ASP.NET Validation from client code

I recently ran into a scenario where I needed to have a submit button exclusively run some client code, which is pretty common and usually handled by having some DOM element call an onclick method that does the work.  However, there was quite a bit of validation that needed to be done and I did not want to have to rewrite the logic that the built in ASP.NET Validators provide.  My solution was to make the form as if I was going to do a full postback, including adding validation to many different controls.  Then I intercepted the postback by calling my custom JavaScript validation/action method and then returning false inside the OnClientClick property of the submitting button (which suppresses the postback, and also the validation).  With the use of Firebug (an essential web development tool for Firefox) I was able to drill into the WebForm__DoPostBackWithOptions() method (included in the WebResource.axd JavaScript include) that ASP.NET uses.  The first few lines are as follows:

var validationResult = true;
 if (options.validation) {
 if (typeof(Page_ClientValidate) == 'function') {
 validationResult = Page_ClientValidate(options.validationGroup);
 }
 }

From there you can see that all of the work is done inside the Page_ClientValidate("ValGroup") function, which you can call from your own code to get the best validation without the postback.  What follows is a quick example of how you would use this in practice:

ASP.NET

<asp:TextBox runat="server" ID="tbHours" Width="50px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rvalAddHours" runat="server" ControlToValidate="tbHours" ValidationGroup="AddEntry" ErrorMessage="* Hours Required" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RangeValidator ID="rgValAddHours" runat="server" ControlToValidate="tbHours" ValidationGroup="AddEntry" ErrorMessage="* Hours Must Be 0-24" Display="Dynamic" Type="Double" MinimumValue="0" MaximumValue="24"></asp:RangeValidator>
<asp:Button ID="btnAddEntry" runat="server" OnClientClick="ValidateAndAddNewEntry(); return false;" CausesValidation="true" ValidationGroup="AddEntry" Text="Create" />

JavaScript

function ValidateAndAddNewEntry()
{
    var res = Page_ClientValidate("AddEntry");
    
    if ( res == true )
    {
        //Do work
    }
}

Happy Coding!

Filed under: , , ,

Comments

# re: using ASP.NET Validation from client code

Thursday, February 14, 2008 11:03 AM by Al

Hi Scott. Since the button click always returns false (to supress the validation), how are you posting the form back if the form values are valid?

# re: using ASP.NET Validation from client code

Thursday, February 14, 2008 12:44 PM by srkirkland

Al,

  In this instance I specifically do not want the form to post back under any circumstance.  My client code goes on to call a webservice using MS AJAX and does all of the work from there.

Scott

# re: using ASP.NET Validation from client code

Thursday, March 20, 2008 3:21 PM by Eric Hoff

Hi Scott,

I've tried this and it works but my validators don't appear.  Any idea why?

I do it the same way you do, I even changed the "Display" property on the validators to "Dynamic".

The only difference is I use an <input type="button"> to cause the script (so there is no postback).

Thanks a lot,

-Eric

# re: using ASP.NET Validation from client code

Friday, March 21, 2008 3:22 PM by srkirkland

Eric,

  Make sure that your validation groups are set up correctly and that the line Page_ClientValidate("GroupName"); is being called.  That's what actually makes the validation appear.

  If that doesn't work check that the validation occurs when using a regular ASP button.  If it does than the clientValidate function should work properly.

Scott

# re: using ASP.NET Validation from client code

Monday, July 7, 2008 3:42 PM by AllenG

function ValidateAndAddNewEntry()

{

   Page_ClientValidate("AddEntry");

   if ( Page_IsValid)

   {

       //Do work

   }

}

would work as well.  Just calling the Page_ClientValidate function will update the Page_IsValid property and show any error messages from the validators.  

Even if the OnClientClick return false is removed this shouldn't postback if the page is not valid (I know you never want a postback in this example and removing that would postback if the page was valid).  I haven't looked into it enough, but my hunch is that the __doPostBack function checks the Page_IsValid value.

# re: using ASP.NET Validation from client code

Thursday, October 23, 2008 1:18 PM by Bobby

This is awesome...however, I have a question...

I have one validation summary on a  master page that displays errors from all validation controls...is there anyway to dynamically change the validationsummary's ValidationGroup property in that same bit of javascript?

# re: using ASP.NET Validation from client code

Friday, May 1, 2009 2:49 PM by tropical small times serious findings

techniques hemisphere level intergovernmental australia term ruddiman

# re: using ASP.NET Validation from client code

Wednesday, July 29, 2009 9:55 AM by name

Give somebody the  to a site about the,

# re: using ASP.NET Validation from client code

Wednesday, July 29, 2009 1:31 PM by name

I like it so much,

# re: using ASP.NET Validation from client code

Thursday, July 30, 2009 6:27 AM by name

So where it to find,

# re: using ASP.NET Validation from client code

Friday, May 21, 2010 4:23 AM by Jonny

bimTdC Cool lol hey bla bla bla bla

# re: using ASP.NET Validation from client code

Friday, May 21, 2010 6:04 AM by Jonny

4z9BWE Cool lol hey bla bla bla bla

# re: using ASP.NET Validation from client code

Friday, May 21, 2010 7:45 AM by Jonny

eAjmYa Cool lol hey bla bla bla bla

# re: using ASP.NET Validation from client code

Friday, May 21, 2010 9:29 AM by Jonny

9kTfQM Cool lol hey bla bla bla bla

# re: using ASP.NET Validation from client code

Monday, September 12, 2011 8:43 AM by chathu03j

I have done something similar, but for me -

Page_ClientValidate("profile") always returns false , even if I don't have any validation errors on the page.

when I debug, I see Page_ClientValidate("profile") as undefined, although I have a validationgroup like this.

Appriciate any help :)

# re: using ASP.NET Validation from client code

Monday, June 18, 2012 12:48 PM by girish

how to show validation summary using javascript...