Why XmlHttpRequest is sent though ClientValidation is failed?

I have many AJAX forms on the page and on button click I need to submit them all. Regular **forms.each(function (index, form) { $(form).submit();} won't work for me because in this way ONLY the last form will be submitted eventually. Therefore, I need submit them via $.ajax(...). But I want to enable submit ONLY and ONLY if form is VALID

On "submitForms" click the function "submitTest" is invoked. From jQuery documantation "submitHandler" would be called if form is VALID. So, the validation works and "submitHandler" is NOT invoked if form is INVALID. BUT, the XmlHttpRequest is sent anyway, 开发者_开发知识库though "submitHandler" isn't invoked.

Where is my mistake? Or is there other way to do it? Thank you

<% using (Ajax.BeginForm("FormPost", "Customer", null, new AjaxOptions() { HttpMethod = "POST" }, new { @class = "form-container" }))
       { %>

            <%: Html.TextAreaFor(m => m.Name, new { width = 440, height = 100 })%>
             <input type="button" value="submitForms" />
    <% }%>


<script type="text/javascript">
function submitTest(){
var forms = $(".form-container");

forms.each(function (index, form) {
    $(form).validate({
         submitHandler: function (form) {
                 $.ajax(
                 { 
                    ....
                 });
         }
    });
});

forms.each(function (index, form) {
     $(form).submit();
});
}
</script>

EDITED

Most likely it's due to the Ajax.BeginForm as that sets up an onclick and an onsubmit handler. Which probably winds up triggering first before your validate submit handler.

UPDATE If you want to keep using the ajax form in the module where you plan on submitting the form via jQuery.ajax, you can do the following.

$(function() {
   $('.form-container').removeAttr('onsubmit').removeAttr('onclick');
});

This will remove the handlers Ajax.BeginForm puts on the form tag. You'll need a way to not include this script in the other module though.