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 true/false.

我的模型然后包含:

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

并且视图包含:

@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>

包含在视图中.

提交表单时,客户端验证适用于其他字段(必需的等),但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="">

尝试更新我的视图底部:

<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';它仅验证,当我输入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.in 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(文件); 您的有效方法合理不存在,并且适配器也不存在,因此您的表单有效且没有合理的规则

如果您将代码更改为这样

<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>

有效方法可以添加,但$ .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),它会追加一个数据来形成.如果在设置代码之前调用,则验证设置无需您的设置.你可以删除数据(...),并再次通过你的代码运行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>

validate plugin使用数据名称"validator"和不显眼的使用数据名称"unobtrusiveValidation".

我真的很抱歉我的英语很差,希望你能理解.