Jquery 如何仅在验证成功时提交表单

我尝试在提交请求之前验证表单。 我正在使用jquery验证

我希望当页面完成加载时，表单将自动提交，我将在div中看到“加载”。 但什么也没发生 这是我的密码。但它似乎不起作用

<script type="text/javascript">

    function submitForm() {
        $('#SearchForm').validate({
            errorLabelContainer: "#ErrorLabel",
            rules: {
                instrument: {
                    required: true,
                    maxlength: 10
                }
            },
            messages: {
                maxlength: "Must no longer than 10 characters",
                required: "Must not be empty"
            },

            submitHandler: function () { $('#SearchForm').submit(); }
        });
    }

    $(document).ready(function () {
        $('#SearchForm').submit(function () {
            $('#DivToUpdate').text('Loading ...');
        });
        submitForm();
    });
</script>

函数submitForm（）{
$（“#搜索表单”）。验证({
errorLabelContainer:#ErrorLabel“，
规则：{
文书：{
要求：正确，
最大长度：10
}
},
信息：{
maxlength:“不得超过10个字符”，
必填：“不得为空”
},
submitHandler:function（）{$（'#SearchForm'）.submit（）；}
});
}
$（文档）.ready（函数（）{
$（'#SearchForm'）。提交（函数（）{
$（'#DivToUpdate'）.text（'Loading…'）；
});
submitForm（）；
});

---

ll

制作了一个小型的工作演示

2件事：尝试放置

invalidHandler

并将

form

传递给

submitHandler

在上面的演示中，如果您输入更多，则

maxlenght10

中的halbert将捕获它

其他人可以随意玩演示

希望这会有所帮助：）

链接：

代码

jQuery(function($) {
    $("#form").validate({
        debug: false,
        focusInvalid: false,
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        rules: {
            instrument: {
                required: true,
                maxlength: 10
            },
        },
        messages: {
            maxlength: "Must no longer than 10 characters",
            required: "Must not be empty"
        },
        success: function(label) {
            alert('succes:' + label);
        },
        submitHandler: function(form) {
            alert('start submitHandler');
            postContent('test');
            alert('end submitHandler');
        },
        invalidHandler: function(form, validator) {
            alert('invalidHandler');
        },
    });
});


function postContent(postData) {
    alert('postcontent: ' + postData);

}


​

---

使用下面编写的代码可以解决您的问题

<script type="text/javascript">
    jQuery(function ( $ ) {
            var $theForm = $( 'form' );
        $( '#DivToUpdate' ).text( 'Loading ...' );
        $theForm.validate({
            rules: {
                instrument : {
                    required: true,
                    maxlength: 10
                }
            }, messages: {
                maxlength : "Must no longer than 10 characters",
                required : "Must not be empty"
            }
        });
        if( $theForm.valid() ) {
            $theForm.submit(); //submitting the form
        }
    });
</script>

jQuery（函数（$）{
变量$theForm=$（'form'）；
$（'#DivToUpdate'）。文本（'Loading…'）；
$theForm.validate({
规则：{
文书：{
要求：正确，
最大长度：10
}
}，讯息：{
maxlength:“不得超过10个字符”，
必填：“不得为空”
}
});
if（$theForm.valid（））{
$theForm.submit（）；//提交表单
}
});

一般情况下，您不应该使用

submitHandler

---

添加：在运行示例。

在方法中使用return true/false