可以单击Jquery Validation未经验证的表单提交按钮（使用Fiddle）

Question

I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.

This causes the hidden loading image to show even though the form is no being submitted.

Here is a fiddle with the loader and script http://jsfiddle.net/mikeef74/gzSDH/16/

var submit_hit = false;

$(document).ready(function () {
    $('#iframe1').on('load', function () {
        $('#loader1').hide();
        if (submit_hit) {
            $('#form_container').hide();
            $('#mydivhide1, #mydivhide2').show();
            $('body').css("background-image", "url(images/previewbg7.jpg)");
            $('body').css("overflow-y", "auto");
        }
    }
});

$("#form_710370").validate();
$('#form_710370').submit(function (e) {
    $('#loader1').show();
        submit_hit = true;
        return true;
    });
});

Answer 1

The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.

Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler . Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.

$("#form_710370").validate({
    submitHandler: function(form) {
        $("#loader1").show();
        submit_hit = true;
        form.submit();
    }
});

// remove this
//$('#form_710370').submit(function (e) { ... }

http://jqueryvalidation.org/documentation/

Answer 2

This is way validate a form in jquery:

 $(function() {
            $("#form_710370").validate({
                rules: {
                          //
                       },
                messages: {
                       //
                       },
        submitHandler: function(form) {
                    form.submit();
                }
            });
        });