JQuery-validate submitHandler 不适用于 MVC 4

Question

我正在研究 MVC4 视图模型并尝试使用 JQuery 实现不显眼的验证。出于测试目的，我已经实现了一些自定义验证规则，当我将生成的 MVC 代码（见下文）复制到 JSFiddle 时它们可以正常工作，但它在 MVC 项目中根本不起作用。

我知道 Javascript 在 MVC 视图模型中工作，因为每次页面加载时都会弹出警报（'lol'）。只是提交处理程序和验证规则不起作用。

请注意，以下内容在 Web.config 上设置为 true：

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

此外，这些是包含的脚本：

<script src="/Scripts/jquery-1.7.1.js"></script>    
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script> 



<form action="/Edit/Edit" id="SubmitForm" method="post" name="SubmitForm">                <fieldset>
                    <legend>Details</legend>
                    <table>
                        <tr><th>Site</th><th>Account</th><th>Metric Name</th><th>Value</th></tr>


<tr><input data-val="true" data-val-number="The field siteId must be a number." data-val-required="The siteId field is required." id="siteId" name="siteId" type="hidden" value="60" /></tr>
<tr><input data-val="true" data-val-number="The field accountId must be a number." data-val-required="The accountId field is required." id="accountId" name="accountId" type="hidden" value="14633" /></tr>
<tr><input data-val="true" data-val-date="The field monthYear must be a date." data-val-required="The monthYear field is required." id="monthYear" name="monthYear" type="hidden" value="2013-10-01 12:00:00 AM" /></tr>
<tr><input id="accountName" name="accountName" type="hidden" value="Company1" /></tr>
<tr><input id="siteName" name="siteName" type="hidden" value="Auckland, New Zealand" /></tr>

<tr>
<td>Auckland, New Zealand</td>
<td>FONTERRA</td>
<td>Calls Offered</td>
<td><input class="text-box single-line" data-val="true" data-val-is="your high value needs to be greater than your low value." data-val-is-dependentproperty="handled" data-val-is-operator="GreaterThan" data-val-is-passonnull="False" data-val-number="The field offered must be a number." data-val-required="The offered field is required." id="offered" name="offered" type="text" value="8052.00" /></td>
    <td><span class="field-validation-valid" data-valmsg-for="offered" data-valmsg-replace="true"></span></td>
</tr>

<tr>
<td>Auckland, New Zealand</td>
<td>Company 1</td>
<td>Agent Incoming Calls Handled</td>
<td><input class="text-box single-line" data-val="true" data-val-number="The field handled must be a number." id="handled" name="handled" type="text" value="7882.00" /></td>
<td><span class="field-validation-valid" data-valmsg-for="handled" data-valmsg-replace="true"></span></td>
</tr>

<tr>
<td>Auckland, New Zealand</td>
<td>Company 1</td>
<td>Calls Transferred</td>
<td><input class="text-box single-line" data-val="true" data-val-number="The field transferred must be a number." id="transferred" name="transferred" type="text" value="38.00" /></td>
<td><span class="field-validation-valid" data-valmsg-for="transferred" data-valmsg-replace="true"></span></td>
</tr>

  (...)
  (...)
  (...)

        <script>
            $(document).ready(function () {
                alert("lol");
                $.validator.addMethod('lessThan', function (value, element, params) {
                    var field_1 = $('input[name="' + params[0] + '"]').val();
                    return parseInt(value) < parseInt(field_1);
                }, "lessThan");

                $("#SubmitForm").validate({
                    errorElement: "span",
                    rules: {
                        offered: {
                            required: true,
                            digits: true,
                            lessThan: ['handled']
                        },
                        handled: {
                            required: true,
                            digits: true
                        }
                    },
                    messages: {
                        offered: "Offered has to be >= handled",
                        handled: "Enter number of offered calls"
                    },
                    submitHandler: function (form) { // for demo
                        alert('valid form');
                        return false;
                    }
                });

            });

</script>

Answer 1

这个问题的答案：ASP.NET MVC 3 Unobtrusive Validation - Before Validate Event? 回答了你的问题的标题。所以可以如下使用提交事件：

$('#SubmitForm').submit(function () {
    if ($(this).valid()) {
        alert('the form is valid');
        //you can add return false here if you want to perfom manual validation and cancel the submit
    } else {
        alert('the form is not valid');
    }
});

对于自定义非侵入式验证规则，您还需要确保您的输入元素具有属性data-val-lessThan="some validation message"，并且您还需要一个非侵入式适配器。在$.validator.addMethod 之后添加类似这样的内容：

$.validator.unobtrusive.adapters.add("lessThan", function (options) {
   options.messages["lessThan"] = options.message;
});