如何停止回发或提交jQuery Unobtrusive验证事件

Question

我正在使用jQuery Unobtrusive Validation,并希望在提交表单之前做一些事情.我不想在成功验证后回发表单,而是希望向用户显示成功消息并重置相同的表单以添加其他数据.

在下面的代码中,它仅在表单无效时显示警报,如果有效则仅显示回发.

目前我的表单已提交,即使我想避免在这种情况下回发.

@model MyProject.ViewModels.CustomerViewModel

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    $("#addCustomer").click(function () {

        $("#myForm").validate();

        if ($("#myForm").valid()) {

            // This part doesn't get triggered

            alert('yes valid');
            //$.post(...post my data using ajax..)
            alert('data posted successfully.');
            //clear form to submit another data
            clearForm();
            return false;
        }
        else{
            alert('no not valid');
            return false;
        }

  <form id="myForm">
    <div class="formPanel">
            <label>Display Name</label>
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
    </div>
   <button class="btn btn-primary" id="addCustomer">Save</button>
  </div>
 </form>

Answer 1

默认情况下,submit事件始终由无效表单上的jQuery Validate阻止.如果没有发生,那么你没有正确使用插件.

你误解了这个.validate()方法......

$(document).ready(function () {

    $("#addCustomer").click(function () {

        $("#myForm").validate();

        if ($("#myForm").valid()) {
        ....

该.validate()方法仅用于初始化表单上的插件,永远不会在click处理程序中调用.它在DOM ready事件处理程序中被调用一次,默认情况下type="submit",插件会自动捕获元素的单击.

submitHandler当表单有效时,使用回调函数来执行操作. 根据文档,这是你做的适当的地方ajax().如果不使用submitHandler,表单将作为常规表单提交,页面将重定向或重新加载.使用submitHandler下面列出的内容将阻止所有这些.

$(document).ready(function () {  // DOM ready

    $("#myForm").validate({  // initialize the plugin
        submitHandler: function(form) {  // fires on valid form
            alert('yes valid');
            //$.post(...post my data using ajax..)
            alert('data posted successfully.');
            //clear form to submit another data
            clearForm();  // <- I don't see this function in your OP
            return false;
        }
    });  

});   

在您的情况下,由于您有type="button",您需要手动捕获点击,然后触发提交.

    $("#addCustomer").click(function () {  // capture click

        $("#myForm").submit(); // trigger validation test & submit
        ....

否则,您应该click通过将按钮更改为a来完全消除此处理程序type="submit".

<input type="submit" ...

要么

<button type="submit" ...

工作演示:http: //jsfiddle.net/526Yc/

编辑:

该unobtrusive-validation.js插件包含在ASP构造中并.validate()自动调用该方法.由于jQuery Validate插件会.validate()在调用一次之后忽略所有调用,因此.validate()在使用unobtrusive-validation.js插件时也无法调用该方法.由于OP想要更多地控制jQuery Validation,他选择删除unobtrusive-validation插件并.validate()自己构建对方法的调用.