Can JQuery.Validate plugin prevent submission of an Ajax form

Question

I am using the JQuery form plugin (http://malsup.com/jquery/form/) to handle the ajax submission of a form. I also have JQuery.Validate (http://docs.jquery.com/Plugins/Validation) plugged in for my client side validation.

What I am seeing is that the validation fails when I expect it to however it does not stop the form from submitting. When I was using a traditional form (i.e. non-ajax) the validation failing prevented the form for submitting at all.... which is my desired behaviour.

I know that the validation is hooked up correctly as the validation messages still appear after the ajax submit has happened.

So what I am I missing that is preventing my desired behaviour? Sample code below....

<form id="searchForm" method="post" action="/User/GetDetails">
        <input id="username" name="username" type="text" value="user.name" />  
        <input id="submit" name="submit" type="submit" value="Search" />   
</form>
<div id="detailsView">
</div>  

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };
    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
    rules: {
    username: {required:true}},
    messages: {
    username: {required:"Username is a required field."}}
    });
</script>

Answer 1

Just as a first pass, I'm wondering why the line

$("form").validate({

doesn't refer to $("searchform")... I haven't looked this up, or tried it, but that just seems to be a mismatch. Wouldn't you want to call validate on the appropriate form?

Anyway, if this is completely wrong, then the error isn't immediately obvious. :)

Answer 2

I hope you're not using client-side javascript as your sole means of validation. Client-side validation is easily circumvented and unreliable.

You'll get better, more reliable and more secure results if you validate form data server-side. I know this doesn't answer your question as you asked it, but you should consider the overall architectural implications that this problem presents.

Answer 3

May be a return false; on the form will help? :) I mean:

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">

Answer 4

You need to add a callback function for use with the beforeSubmit event when initializing the ajaxForm():

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

Now it knows to check the result of the validation before it will submit the page.

Answer 5

Also make sure all of your input fields have a "name" attribute as well as an "id" attribute. I noticed the jquery validation plugin doesn't function correctly without these.

Answer 6

... well it's been a while so my situation has changed a little. Currently I have a submitHandler option passed to the Validate() plugin. In that handler I manually use ajaxSubmit. More a workaround than an answer I guess. Hope that helps.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});