jQuery validation plugin and .Net WebForm not playing nicely in IE7, works in IE8

Question

Hi all!

Please bear with me. I've got the jQuery validation plugin working beautifully in FF, Opera, Safari and IE8. However, IE7 is giving me problems. Our back-end developer insisted on using .Net WebForm to create the form on the server (at least this is what I think she used, it's .aspx is about all I know - I can post some code if it'll help.) Anyway, in the code her submit button looks like this:

<asp:Button ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />

and the output (in the HTML) looks like this:

<input type="submit" name="btnSubmit" value="Submit the request" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btnSubmit" />

However, when I replace her code with a simple <button type="submit" name="Submit" value="submit" class="button">Submit</button> the validation works, the error messages pop up, clouds part, etc. But she says she can't use this. Sigh.

So I guess my question is: how do I get jQuery to play nicely with her approach? I'm using jQuery to add some nice UI touches to the form, such as accordions, the calendar widget, etc. and I wanted this to be the icing on the cake. I'm also very sure that the initiation of the js is well-formed, I get no js errors for extra comma's, etc.

Thanks for whatever help you can provide.

Answer 1

Does the jQuery require the class to be set to "submit" in order for the jQuery validation plugin to work? That seems to be the most obvious difference between the html generated by .Net and the html you wrote. If that is the case add 'CssClass="submit"' to asp:button element in the aspx page. This will be converted to 'class="submit"' in the generated html.

<asp:Button CssClass="submit" ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />

Answer 2

Based on the javascript that is emitted in the button's onclick event ("if (typeof(Page_ClientValidate)....."), it looks like you are mixing ASP.NET validation and the jQuery Validate plugin. Try adding CausesValidation="false" to the attributes of the button, thereby forcing it to do a normal form submit, to which the Validate plugin responds.