ASP.NET MVC5客户端验证

I have an amount field in a view that is required if a checkbox is checked.

如果选中复选框,我在视图中有一个金额字段。

Once Razor renders the View with Model data, and a user checks a checkbox without a corresponding amount entered. The Validation message appears. If I de-select that checkbox, the validation message does not disappear.

一旦Razor呈现具有模型数据的视图,并且用户选中没有输入相应数量的复选框。出现验证消息。如果取消选中该复选框,则验证消息不会消失。

I've tried to use jquery to remove all the rules generated, but if the user were to checkbox again, prior to post back, those validation rules would have been removed (unless I store them... which is getting really ugly.)

我试图使用jquery删除所有生成的规则,但如果用户再次复选,在回发之前,那些验证规则将被删除(除非我存储它们......这真的很难看。)

Is there an acceptable way to re-validate client-side with the same requirements in the MVC Model?

是否有一种可接受的方法来重新验证客户端与MVC模型中的相同要求?

Model:

[Display(Name = "Include Amount")]
public bool IncludeAmount { get; set; }
[Display(Name = "Amount")]
[RequiredIf("IncludeAmount", TargetValue = true, ErrorMessage = "Amount is required.")]
[MaxDigits(10, 2)]
[RegularExpression(RegularExpressions.Money, ErrorMessage = ErrorMessages.NumericValueInvalidFormat)]
[GreaterThanZero]
public Nullable<decimal> Amount { get; set; }

View:

<td class="dataEntryLabel" colspan="2">
    @Html.LabelFor(model => model.IncludeAmount)
</td>
<td class="dataEntryField" colspan="2">
    @Html.CheckBoxFor(model => model.IncludeAmount, new { id = "IncludeAmount" })
    <span class="dollar-sign">@Html.TextBoxFor(model => model.Amount, "{0:F}", new { id = "Amount", disabled = "disabled" })</span>
    @Html.ValidationMessageFor(model => model.Amount)
</td>

JavaScript (Client-side):

function fixUnobtrusiveValidations() {
    var form = getForm();
    (<any>$).validator.unobtrusive.parse(form);
}

function onClickCheckBoxIncludeAmount(){
        fixUnobtrusiveValidations();
}

$('IncludeAmount').click(onClickCheckBoxIncludeAmount);

2 个解决方案

#1

Try this to disable the client side validation on onclick events Refer: https://jqueryvalidation.org/validate/#onclick

尝试此操作以禁用onclick事件的客户端验证请参阅:https://jqueryvalidation.org/validate/#onclick

$("#myform").validate({
    onclick: false,
});

OR

$("#yourChkboxID").validate({
    onclick: false,
});

#2

This worked:

if (!($('#IncludeAmount').checked)){
   toggleValidatorVisibility($('#Amount'), false);
}

function toggleValidatorVisibility(element: any, value) {
  var td: any = element.closest('td');
  if (value) {
       td.find('span.field-validation-error').show();
  } else {
       td.find('span.field-validation-error').empty();
  }
}