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) 

當我提交表單時，消息會顯示出來，但只有在回發到服務器後纔會顯示。有沒有什麼辦法可以讓客戶端工作？

Answer 1

您不會得到客戶端驗證的原因是因爲html助手會爲與屬性相關的控件生成data-val-*屬性。 jquery.validate.unobtrusive在表單解析並使用規則時讀取這些屬性，在由該控件關聯的ValidationMessageFor()生成的相應元素中顯示錯誤消息（它通過匹配元素的id屬性來執行此操作 - 錯誤消息是在一個範圍內生成的與<span for="TheIdOfTheAssociatedControl" ...>）。

你沒有（和廣東話）產生財產DeclarationQuestions（僅適用於DeclarationQuestions每個項目的性質的控制，沒有什麼可以匹配。

您可以通過包括您自己的錯誤處理這消息佔位符和攔截.submit事件

HTML（以款式#conditions-error添加CSS爲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}) 
}