jQuery 自定义属性的非侵入式客户端验证

Question

我创建了一个在服务器端工作的自定义验证属性(在发布表单后)，但我无法让验证在客户端工作。

自定义属性是:

public class ReasonableAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return Approval.IsNumberReasonable(value.ToString());
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule rule = new ModelClientValidationRule();
        rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
        rule.ValidationType = "reasonable";
        yield return rule;
    }

}

IsNumberReasonable() 函数只是对输入字段进行一些检查，以确保输入的内容可以合理地作为批准号(例如不为空，或“未知”或类似的内容)返回 bool 真/假。

我的模型包含:

[Display(Name = "Approval Number"]
[Reasonable(ErrorMessage = "Please enter a reasonable {0}")]
public String ApprovalNumber { get; set; }

并且 View 包含:

@Html.LabelFor(model => model.ApprovalNumber, new { @class = "control-label col-md-3" })
<div class="col-md-9 append field">
 @Html.TextBoxFor(model => model.ApprovalNumber, new { @class = "input text" })
 @Html.ValidationMessageFor(model => model.ApprovalNumber)
</div>

在 JavaScript 中我尝试添加:

$.validator.unobtrusive.adapters.addBool("reasonable", "required");
// OR
$.validator.unobtrusive.adapters.add("reasonable");

和:(在 document.ready 之外)

(function ($) {
            $.validator.addMethod('reasonable', function (value, element, params) {
                return value != '';
            }, 'Clientside Should Not Postback');
            $.validator.unobtrusive.adapters.addBool('reasonable');
        })(jQuery);

有多种组合，但未能使其正常工作。

我有

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

包含在 View 中。

提交表单后，客户端验证适用于其他字段(必填字段等)，但 ApprovalNumber 旁边的验证消息永远不会出现/不执行我的自定义验证。

任何正确方向的指针都会受到赞赏。谢谢。

我也有

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

已在 Web.config 文件中。

编辑2:根据 chenZ 的帖子:输入字段的 html 为:

<input class="input text valid" data-val="true" data-val-reasonable="Please enter a reasonable Approval Number" data-val-required="Approval Number is Required." id="ApprovalNumber" name="ApprovalNumber" type="text" value="">

尝试用以下方法更新我的 View 底部:

<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
    (function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
    })(jQuery);
    </script>

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

jquery.validate.unobtrusive.js 的末尾现在包含:

    $(function () {
        $.validator.unobtrusive.adapters.addBool('reasonable');
        $("#formID").removeData("unobtrusiveValidation").removeData("validator");
        $jQval.unobtrusive.parse(document);
    });
}(jQuery));

和create.js包含:

$.validator.unobtrusive.adapters.addBool("mandatory", "required"); // another custom attribute for checkbox validation
    var v = $("#formID").validate({
        errorClass: "warning",
        onkeyup: false,
        onblur: false,
    });

v 变量进一步用于提交按钮:

$("#SubmitButton").click(function () {
    if (v.form()) {
          // The form passed validation so continue..
        } else {
            // Validation failed, do something else..
        }
});

我做了一些进一步的测试，它似乎与以下内容有关:

(function ($) {
            $.validator.addMethod('reasonable', function (value, element, params) {
                return value != '';
            }, 'Clientside Should Not Postback');
        })(jQuery);

当我将其更改为:

(function ($) {
            $.validator.addMethod('reasonable', function (value, element, params) {
                return value != 'unknown';
            }, 'Clientside Should Not Postback');
        })(jQuery);

它可以工作，但只有当我在输入框中输入“未知”时，其他任何内容都会通过..类似地，如果我输入 return value != 'jhdsfkhsdkfj'; 它仅在我输入 < em>jhdsfkhsdkfj.

所以看起来它正在使用这个作为规则？而不是我的服务器端 IsNumberReasonable() 函数。

希望对故障排除有所帮助。

Answer 1

我没有尝试过，所以我不确定，但我认为有两个地方你可能是错的。

1.rule.ValidationType = "合理";
检查你的html，找到输入，是否有attr data-val-reasonalbe 或reasonale

$.each(this.adapters, function () {
            var prefix = "data-val-" + this.name,

在jquery.validate.unobtrusive.js第173行，你可以找到这个，所以它一定是一个data-val-xxxx

2.在 jquery.validate.unobtrusive.js 文件末尾可以找到

$(function () {
    $jQval.unobtrusive.parse(document);
});

所以，当页面加载时，所有表单集都会验证

这是一件很难的事情。如果你的代码是这样的

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
.....
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);

当你执行 unobtrusive.parse(document); 时您的有效方法合理不存在，并且适配器也不存在，因此您的表单有效没有规则合理

如果你将代码更改为这样

<script src="~/Scripts/jquery.validate.js"></script>
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

valid方法可以添加，但是$.validator.unobtrusive未定义

我认为你应该做得更多

<script src="~/Scripts/jquery.validate.js"></script>
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
    })(jQuery);
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

并放置

$.validator.unobtrusive.adapters.addBool('reasonable');

进入jquery.validate.unobtrusive.js，并确保它在

之前运行

$(function () {
    $jQval.unobtrusive.parse(document);
});

我不确定这是否有效，也许我稍后会尝试。希望这可以帮助您。

更新我尝试过这个。在第2点中，您可以使用代码

$(function () {
    $("#formid").removeData("unobtrusiveValidation").removeData("validator");
    $.validator.unobtrusive.parse(document);
});

将此代码放在添加有效方法之后，这将清除有效设置并使用您的自定义规则再次解析

更新2

$("#a").validate({});//first time call is useful
$("#a").validate({});//second time call is useless

也适用于 unobtrusive.parse(...)

jquery.validate.js 第 41 行

var validator = $.data( this[0], "validator" );
if ( validator ) {
    return validator;
}

和 jquery.validate.unobtrusive.js 第 99 行

result = $form.data(data_validation),
    ...
    if (!result) { ....

当 <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
该文件的末尾，称为 unobtrusive.parse(document)，它会将数据附加到表单中。如果它在您设置代码之前调用，则验证设置无需您的设置。您可以删除Data(...)，并再次通过您的代码运行unobtrusive.parse(document)，例如

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/setting.js"></script>
<script>
  $(function(){ $("#formid").removeData(...).removeData(...); 
  ....unobtrusive.parse(document)});
</script>

验证插件使用数据名称“validator”和不引人注目的使用数据名称“unobtrusiveValidation”。

我真的很抱歉我的英语不好，希望你能理解。