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 07, 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.

Leave a Comment

(required) 
(required) 
(optional)
(required)