客户端列表的 MVC 自定义验证

Question

我正在尝试编写一个在客户端运行的自定义验证器，用于验证是否已勾选所有复选框。

这是模型的声明：

[DeclarationsAccepted(ErrorMessage = "You must tick all declarations")]        
    public IList<DeclarationQuestion> DeclarationQuestions { get; set; }

这是属性：

public class DeclarationsAccepted : ValidationAttribute, IClientValidatable
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {

        var questions = value as IList<DeclarationQuestion>;

        if (questions != null && questions.All(c => c.Answer))
        {
            return ValidationResult.Success;
        }
        return new ValidationResult("You must accepted all declarations to continue");
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var modelClientValidationRule = new ModelClientValidationRule
        {
            ValidationType = "declarationsaccepted",
            ErrorMessage = FormatErrorMessage(metadata.DisplayName)
        };            
        yield return modelClientValidationRule;
    }
}

到目前为止一切顺利，在服务器端运行。

对于客户，我将其连接如下：

jQuery.validator.addMethod('declarationsaccepted', function (value, element, params) {

        //Implement logic here to check all boxes are ticked
        console.log(value);

        return false;
    }, '');


    jQuery.validator.unobtrusive.adapters.add('declarationsaccepted', {}, function (options) {
        options.rules['declarationsaccepted'] = true;
        options.messages['declarationsaccepted'] = options.message;
    });

我正在这样显示复选框：

@{ var questionIndex = 0; }
        @foreach (var question in Model.DeclarationQuestions)
        {

                @Html.CheckBoxFor(model => Model.DeclarationQuestions[questionIndex].Answer, new { id = "DeclarationQuestions" + questionIndex})

            questionIndex++;
        }

然后使用此显示验证消息：

@Html.ValidationMessageFor(c => c.DeclarationQuestions)

当我提交表单时，会显示消息，但仅在 post 返回服务器后才会显示。有什么方法可以让它在客户端工作吗？

Answer 1

您不会获得客户端验证的原因是因为 html 助手为与属性关联的控件生成 data-val-* 属性。 jquery.validate.unobtrusive 在解析表单并使用规则时读取这些属性，在与该控件关联的 ValidationMessageFor() 生成的适当元素中显示错误消息（它通过匹配 id 属性来实现元素的 - 错误消息是在 <span for="TheIdOfTheAssociatedControl" ...>).

的范围内生成的

您不会（也不能）为属性 DeclarationQuestions 生成控件（仅针对 DeclarationQuestions 中每个项目的属性，因此没有任何内容可以匹配。

您可以通过包含您自己的错误消息占位符并拦截 .submit 事件来处理此问题

html（将 css 添加到样式 #conditions-error 为 display:none;）

<span id="delarations-error" class="field-validation-error">
  <span>You must accept all declarations to continue.</span>
</span>

脚本

var declarationsError = $('#delarations-error');
$('form').submit(function() {
  var isValid = $('.yourCheckBoxClass').not(':checked') == 0;
  if(!isValid) {
    declarationsError.show(); // display error message
    return false; // prevent submit
  }
});

$('.yourCheckBoxClass').change(function() {
  if($(this).is(':checked')) {
    declarationsError.hide(); // hide error message
  }
});

旁注：生成复选框的循环应该是

for (int i = 0; i < Model.DeclarationQuestions.Count; i++)
{
  @Html.CheckBoxFor(m => m.DeclarationQuestions[i].Answer, new { id = "DeclarationQuestions" + i})
}

客户端列表的 MVC 自定义验证

MVC Custom Validation for List on Client Side

asp.net-mvc

asp.net-mvc-4