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!

16 Comments

  • 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?

  • 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

  • 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 to cause the script (so there is no postback).

    Thanks a lot,
    -Eric

  • 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

  • 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.

  • 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?

  • techniques hemisphere level intergovernmental australia term ruddiman

  • Give somebody the to a site about the,

  • I like it so much,

  • So where it to find,

  • bimTdC Cool lol hey bla bla bla bla

  • 4z9BWE Cool lol hey bla bla bla bla

  • eAjmYa Cool lol hey bla bla bla bla

  • 9kTfQM Cool lol hey bla bla bla bla

  • 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 :)

  • how to show validation summary using javascript...

Comments have been disabled for this content.