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回调函数在表单有效时执行操作。 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
        ....

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

<input type="submit" ...

OR

<button type="submit" ...

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

修改：

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

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

1 个答案: