jquery - 如何停止回发或提交事件以进行 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 就绪事件处理程序中被调用一次，默认情况下，插件会自动捕获 type="submit" 元素的点击。

当表单有效时，使用 submitHandler 回调函数执行操作。 As per docs, this is the proper place to do your 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
        ....

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

<input type="submit" ...

或者

<button type="submit" ...

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

<小时/>

编辑:

ASP 中包含的 unobtrusive-validation.js 插件会自动构造并调用 .validate() 方法。由于 jQuery Validate 插件在调用一次后将忽略对 .validate() 的所有调用，因此您无法在使用 unobtrusive 的同时调用 .validate() 方法-validation.js 插件。由于 OP 希望对 jQuery 验证有更多控制，他选择删除 unobtrusive-validation 插件并自己构建对 .validate() 方法的调用。