jQuery自定义属性的不显眼的客户端验证

前端之家收集整理的这篇文章主要介绍了jQuery自定义属性的不显眼的客户端验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经创建了一个自定义验证属性,它在服务器端工作(在表单发布后)但我无法让验证工作在客户端.

自定义属性是:

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',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','Clientside Should Not Postback');
        })(jQuery);

当我把它改为:

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

它有效,但只有当我在输入框中输入’unknown’时,其他任何东西都会通过..类似的,如果我把返回值!=’jhdsfkhsdkfj’;它只在我输入jhdsfkhsdkfj时验证.

所以它似乎正在使用它作为规则?而不是我的服务器端IsNumberReasonable()函数.

希望有助于排除故障.

解决方法

我没有尝试过,所以我不确定,但我认为有两个地方你可能错了.

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','Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);

当你做unobtrusive.parse(文件);您的有效方法合理不存在,并且适配器也不存在,因此您的表单有效且没有合理的规则

如果您将代码更改为这样

<script src="~/Scripts/jquery.validate.js"></script>
(function ($) {
        $.validator.addMethod('reasonable','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','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”.

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

猜你在找的jQuery相关文章