Why XmlHttpRequest is sent though ClientValidation is failed?

Question

0.00/5 (No votes)

See more:

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 fucntion "submitTest" is invoked.
From jQuery documentation "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 I make mistake?
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>

Posted 12-Jan-11 6:01am

TheAteist

Updated 12-Jan-11 22:47pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Answer 1 · 2011-01-13T02:29:00

Please see my comments to your code:

C#

<script type="text/javascript">
function submitTest()
{
    var forms = $(".form-container");
    
    // Here you setup the validation for your forms and all you are
    // doing here is installing an submit handler that will get fired
    // after successful validation, but there are no validation rules.
    forms.each(function (index, form) {
        $(form).validate({
             // This handler will be called for every form because you
             // forgot to specify validation rules so the validation will
             // never fail.
             submitHandler: function (form) {
                     $.ajax(
                     { 
                        ....
                     });
             }
        });
    });

    // Here you trigger the submit event for each form. This will cause
    // the validation of each of the forms. Since no validation rules
    // were setup each form will validate just fine. This means the
    // jQuery Validation plugin will call the submitHandler function you
    // installed when setting up the form validation and the AJAX call
    // will be made.
    forms.each(function (index, form) {
         $(form).submit();
    });
}
</script>

There are two things you can do:
1. Setup validation rules for the forms. See the documentation of the Validation plugin for jQuery on how to do that.
2. Make the nescessary checks inside the submitHandler function. If the checks succeed you make the AJAX request else not. This kind of defeats the presence of the Validation plugin though.

My advice is to take 1. as the way to this.

Caveat: Setting up the same validation rules for all forms like you did in your code example also means that all forms would have identical fields (at least the ones that are validated). This can make sense in some scenarios, but it is also possible that this is not what you wanted.

If you have any doubts, leave a comment to my answer.

Best Regards,
Manfred