将客户端验证失败添加到 ASP.NET MVC ModelState

Question

在 HTTP post 页面中，我指定了以下 DIV：

<div class="centered" style="text-align:center">
  <span class="help-block">
    @Html.ValidationSummary(true)
  </span>
</div>

我有以下 javascript 验证：

函数验证（）{

        var cardTypeCheck = RealexRemote.validateCardType(document.getElementById('cardType').value);
        var cardNumberCheck = RealexRemote.validateCardNumber(document.getElementById('cardNumber').value);
        var cardHolderNameCheck = RealexRemote.validateCardHolderName(document.getElementById('cardholderName').value);
        var expiryDateMonthCheck = RealexRemote.validateExpiryMonthDateFormat(document.getElementById('expiryDateMM').value);
        var expiryDateYearCheck = RealexRemote.validateExpiryYearDateFormat(document.getElementById('expiryDateYY').value);
        var expiryDateFormatCheck = RealexRemote.validateExpiryDateFormat(document.getElementById('expiryDateMM').value.concat(document.getElementById('expiryDateYY').value));
        var expiryDatePastCheck = RealexRemote.validateExpiryDateNotInPast(document.getElementById('expiryDateMM').value.concat(document.getElementById('expiryDateYY').value));
        if (document.getElementById('cardNumber').value.charAt(0) == "3") { cvnCheck = RealexRemote.validateAmexCvn(document.getElementById('cvn').value); }
        else { cvnCheck = RealexRemote.validateCvn(document.getElementById('cvn').value); }
        if (cardNumberCheck == false || cardHolderNameCheck == false || expiryDateYearCheck == false || expiryDateYearCheck == false || expiryDateFormatCheck == false || expiryDatePastCheck == false || cvnCheck == false) {
            // code here to inform the cardholder of an input error and prevent the form submitting
            if (cardTypeCheck == false) { alert("Card Type must be selected") }
            if (cardNumberCheck == false) { alert("Card Number entered is not valid") }
            if (expiryDateMonthCheck == false) { alert("Expiry Date Month must be selected") }
            if (expiryDateYearCheck == false) { alert("Expiry Date Year must be selected") }
            if (expiryDateMonthCheck == true && expiryDateYearCheck == true)
            {
                if (expiryDatePastCheck == false) { alert("Expiry Date must not be in the past") }
            }                
            if (cardHolderNameCheck == false) { alert("Card Holder name must be entered") }                
            if (cvnCheck == false) {  }
            return false;
        }
        else
            return true;
    }

我不想将验证错误作为 javascript 警报发出，而是想将它们添加到 ModelState 错误列表中，但我不确定在客户端如何执行此操作。我尝试过：

if (cvnCheck == false) {
  var ul = $(".help-block ul");
  ul.append("<li>Security Code must be entered</li>")
}

但是这个不显示，如何在客户端设置我的ModelState无效

Answer 1

var helpBlock = $(".help-block"); helpBlock.append("<div class=\"validation-summary-errors\"></div>");
$(".validation-summary-errors").append("<li>" + "Expiry Date Year must be selected" + "</li>");

将客户端验证失败添加到 ASP.NET MVC ModelState

Adding client side validation failures to ASP.NET MVC ModelState

javascript

jquery

asp.net-mvc-4

unobtrusive-validation

modelstate