Question

I have a simple form that uses jQuery validation to notify the user of input errors, etc. When I add an ASP.NET CustomValidator to the form, it causes the page to postback and skip the jQuery validation. I need the form to not be submitted to the server until the client-validation is correct. Has anyone seen this before?

This is my form:

<form id="form1" runat="server">  
    <core:standardscriptmanager runat="server" />
    <div>
        <asp:textbox id="Email" name="Email" runat="server" cssclass="_RegisterFormValidate FormField Email {required:true, email:true, messages:{required:'You must enter an email address.', email:'Please enter a valid email address.'}}" maxlength="200" columns="75" width="98%" tooltip="Your email address"></asp:textbox>
        <br /><br />
        <core:recaptcha runat="server" />
        <br />
        <asp:linkbutton id="CreateAccount" runat="server" onclick="CreateAccount_Click" text="create"></asp:linkbutton>
    </div>
</form>

And this is the core:recaptcha control that contains the custom validator:

<script type="text/javascript"
 src="http://www.google.com/recaptcha/api/challenge?k=XXXKEY">
</script>
<noscript>
 <iframe src="http://www.google.com/recaptcha/api/noscript?k=XXXKEY"
     height="300" width="500" frameborder="0"></iframe><br>
 <textarea name="recaptcha_challenge_field" rows="3" cols="40">
 </textarea>
 <input type="hidden" name="recaptcha_response_field"
     value="manual_challenge">
</noscript>

<asp:customvalidator id="RecaptchaValidator" runat="server" controltovalidate="DummyInput" onservervalidate="ServerValidate" validateemptytext="true" />
<asp:textbox id="DummyInput" runat="server" cssclass="Hidden"></asp:textbox>

Note: The DummyInput is only there to make the CustomValidator happy, my ServerValidate event correctly deals with the captcha results.

The ServerValidate portion of the CustomValidator is working fine during the postback, but I need it to stop interfering with the client-side validation. If I remove the CustomValidator from the recaptcha control, everything plays nice.

Do I need to do something like call jquery-validate in the CustomValidator’s clientvalidationfunction in order to make this work correctly?

Any thoughts or suggestions would be welcome.

Answer 1

So it turns out the answer to this issue was to set CausesValidation=”False” on my linkbutton and then call Page.Validate() in the linkbutton’s OnClick handler.

It’s not exactly the solution I was looking for since I’ll have to remember to do those things every time I want to use recaptcha (or any custom validator for that matter) but this seems to work for now.