jQuery Validation plugin and ASP.NET validators Web Forms

I would really like use the jQuery Validation plugin in my ASP.NET Web Forms application (not MVC).

I value jQuery validation for the Richer UI experience I can provide the end user and I have some requirements to highlight the invalid fields using a red border (css).

I value asp.net validators because they run the validations not only on the client but on the server so that I don’t open various security vulnerabilities to any user who is clever enough to turn off javascript in their browser.

So I am looking for a nice clean way to integrate these two technologies.

The best I can come up with is to have all ASP.NET validators set to enableclientscript=false and repeat the validation rules on the client in jQuery and on the server as asp.net validators but I can already see some challenges with this approach.

In the end I found the lowest friction way to achieve highlighting with asp.net validators and jquery was not to use the jQuery Validation plugin but to use the simple line of jquery which follows (note that the exact syntax will vary depending on how you layout your forms):

<script type='text/javascript'>


        $("input[@type=submit]").click(function() {
        $('span.validationerror:hidden').parent().parent().find('input').removeClass('inputError');
        $('span.validationerror:visible').parent().parent().find('input').addClass('inputError');                        

        });

</script>

Comments:

If you are serious about validation, I would look into something like Peter Blum’s validators (http://www.peterblum.com/Home.aspx) as they should be able to do everything you want and more. They don’t use JQuery, but remember the whole point of JQuery is to save developer time – the end user doesn’t know or care whether you are using JQuery or not if the overall effect is the same.

Answers:

This might help!

http://www.delphicsage.com/home/blog.aspx?d=205

Answers:

You can use asp.net and jquery validators together with no problem… even on the same control… you just need to set CssClass for the control so that jquery can find it… and then you add OnClientClick="return $('#aspnetForm').valid();" to your submit button(s).

Be sure and include the usual jquery library and jquery.validate.js and add a document ready function of course, etc.

Answers:

Leave a comment