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

时间：2014-02-25 02:26:06

标签： jquery asp.net-mvc validation asp.net-mvc-4 unobtrusive-validation

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

自定义属性为：

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()函数只是对输入的字段进行一些检查，以确保他们输入的内容可以合理地为批准编号（例如，非空，或“未知”或类似的东西）返回{{1} }。

我的模型随后包含：

bool true/false

并且视图包含：

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

在我尝试添加的JavaScript中：

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

和:(在document.ready之外）

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

以各种组合但未能使其发挥作用。

我有

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

包含在视图中。

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

赞赏任何正确方向的指针。 感谢。

我也有

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

已经在Web.config文件中。

编辑2： 根据chenZ的帖子： 输入字段的html是：

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

尝试使用以下方式更新视图的底部：

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

它可以工作，但只有当我在输入框中输入'unknown'时，其他任何内容都会通过..同样，如果我放(function ($) { $.validator.addMethod('reasonable', function (value, element, params) { return value != 'unknown'; }, 'Clientside Should Not Postback'); })(jQuery); 它只会在输入 jhdsfkhsdkfj 时验证。

所以它似乎正在使用它作为规则？而不是我的服务器端return value != 'jhdsfkhsdkfj';功能。

希望有助于排除故障。

3 个答案:

答案 0 :(得分：7)

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

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（文件）;您的有效方法合理不存在，并且适配器也不存在，因此您的表单有效且没有合理的规则

如果您将代码更改为此

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

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

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

答案 1 :(得分：0)

将此添加到您的Web.config 

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

酷然后尝试修改您的规则以使用以下规则。

$.validator.unobtrusive.adapters.add("reasonable", ["reasonable"], function (options) {
options.rules["reasonable"] = "#" + options.params.reasonable;
options.messages["reasonable"] = options.message;});

答案 2 :(得分：0)

由于我在查看我的问题时登陆这里，我想分享一下，如果您正在使用任何第三方库进行控制，例如使用选项嵌入客户端库的DevExpress，那么它们可能实际上是 - 包括验证脚本，这可能导致您的适配器被正确添加，以便稍后再次丢失。在我的情况下，我不得不移动我的.js文件，在这些其他违规脚本下面创建客户端不显眼的验证器适配器。我还想考虑放弃我自己包含的所述文件，或者配置我的第三方库不包括它们，以防止这种混淆。

相关问题
最新问题