0

我试图让客户端验证在 ASP/NET MVC4 中工作，但没有服务器端属性和数据注释。在我看来，我想严格使用 jQuery Validation 插件来做到这一点。这是我的 HTML：

<form id="mainForm" method="post" action="/Department/Save">

@Html.ValidationSummary("Please correct the errors")
<label>Department Name:</label><input type="text" id="DepartmentName" name="DepartmentName"/>  
@Html.ValidationMessageFor(model => model.DepartmentName)
<br />    
<label>Department Name Fr:</label><input type="text" id="DepartmentNameFr" name="DepartmentNameFr"/>
<input type="submit" id="btnSave" value="Save" />

这是我的 jQuery 脚本：

          $("#formWeek").validate({
          highlight: function (element, errorClass) {
              $(element).add($(element).parent()).addClass("input-validation-error");
          },
          unhighlight: function (element, errorClass) {
              $(element).add($(element).parent()).removeClass("input-validation-error");
          }
      });          

      $('#DateRangeCriteriaWeek').rules('add', {
          required: true,
          regex:"(201[3-9]|20[2-9][0-9])-(0[1-9]|[1-4][0-9]|5[0-3])", 
          messages: {
              required: "Date Range Criteria is required.",
              regex: "Date Range Criteria format is invalid."
          }
      });

一开始，我什至没有弹出任何错误消息，当我将输入留空时（当我单击提交按钮时），我只是得到红色的文本框。我原本以为 jQuery 会自动显示错误消息，但事实并非如此。但是，当我添加 Html.ValidationSummary 助手时，错误消息突然出现。

然后我注意到错误消息是默认消息，而不是我上面定义的自定义消息。我发现为了显示自定义消息，我必须使用如上所示的规则方法。但是现在，当用户更正错误时，消息并没有消失。

这是呈现的 HTML：

<form id="formWeek" method="post" data-ajax-update="#ProductsDivWeek" data-ajax-success="process('Week')" data-ajax-mode="replace" data-ajax-method="Post" data-ajax="true" action="/Dashboard/Products?Length=9" novalidate="novalidate">
<div>
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
        <li style="display:none"></li>
        </ul>
    </div>
</div>
<table>
<tbody>
    <tr>
        <td>Date : </td>
        <td>
            <input id="DateRangeFilterWeek" type="hidden" value="FiscalWeek" name="DateRangeFilter">
            <span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
            <input id="DateRangeCriteriaWeek" class="ui-autocomplete-input" type="text" value="21/09/2013" name="DateRangeCriteria" data-val-required="Date Range Criteria is required." data-val="true" autocomplete="off">
        </td>
        <td>
        <input id="btnApplyWeek" type="submit" title="Apply" value="Apply" name="btnApply">
        </td>
    </tr>
</tbody>
</table>

4

1 回答 1

0

regexjQuery Validate 插件中没有调用这样的方法或规则。您必须使用内置方法创建此自定义.addMethod()方法。

jQuery.validator.addMethod("regex", function (value, element, param) {
    var regex = new RegExp(param);
    return regex.test(value);
}, "");


$('#DateRangeCriteriaWeek').rules('add', {
    required: true,
    regex: "^(201[3-9]|20[2-9][0-9])-(0[1-9]|[1-4][0-9]|5[0-3])",
    messages: {
        required: "Date Range Criteria is required.",
        regex: "Date Range Criteria format is invalid."
    }
});

请参阅文档：http addMethod: //jqueryvalidation.org/jQuery.validator.addMethod/

工作演示：http: //jsfiddle.net/jrLSF/

另外，由于您没有使用unobtrusive.validate.js...

1）您已经在其他地方定义了您的规则和消息，所以AFAIK，您不需要任何data-val-属性。

2）data-ajax-从标签中删除属性<form>并将任何属性.ajax()放入submitHandler函数中。

submitHandler: function () {
    // ajax goes here;
    return false;
}
于 2013-09-21T19:42:34.203 回答