服务器端验证忽略非侵入式验证中的自定义 errorClass-解网

问：

我在 asp.net 核心中使用不显眼的验证，并设置了一个自定义类以利用引导 CSS 类。

这对于客户端验证非常有效，但服务器端验证会忽略自定义类，并恢复为默认的“input-validation-error”而不是“is-invalid”。

如何让自定义错误类与服务器端验证一起使用？

const validationCustomSettings = {
        validClass: "is-valid",
        errorClass: "is-invalid"
};
// Need to set validation settings on both the validator and unobtrusive options.
jQuery.validator.setDefaults(validationCustomSettings);    
jQuery.validator.unobtrusive.options = validationCustomSettings;

剃须刀代码：

ModelState.AddModelError("ADR.TTIS",
                        "Test server side model error.");

剃刀页面：

<form id="myForm" method="post">
    <div class="row">
        <div class="col-sm-3">
            <label asp-for="ADR.AircraftID" class="form-label"></label>
            <select asp-for="ADR.AircraftID" asp-items="@(new SelectList(Model.Aircraft,"AircraftID","Registration"))" class="form-select" required>
                <option></option>
            </select>
            <span asp-validation-for="ADR.AircraftID" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.PersonID" class="form-label"></label>
            <select asp-for="ADR.PersonID" asp-items="@(new SelectList(Model.Person,"PersonID","FullName"))" class="form-select" required>
                <option></option>
            </select>
            <span asp-validation-for="ADR.PersonID" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.Date" class="form-label"></label>
            <kendo-datepicker for="ADR.Date" class="form-control" required></kendo-datepicker>
            <span asp-validation-for="ADR.Date" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.TTIS" class="form-label"></label>
            <input asp-for="ADR.TTIS" class="form-control" required />
            <span asp-validation-for="ADR.TTIS" class="text-danger"></span>
        </div>
        <div class="col-sm-12">
            <label asp-for="ADR.Details" class="form-label"></label>
            <textarea asp-for="ADR.Details" class="form-control" rows="3" required></textarea>
            <span asp-validation-for="ADR.Details" class="text-danger"></span>
        </div>
    </div>
    <br />
    <div class="form-check">
        <input asp-for="ADR.Deferred" class="form-check-input isdeferred" type="checkbox" />
        <label asp-for="ADR.Deferred" class="form-check-label"></label>
        <span asp-validation-for="ADR.Deferred" class="text-danger"></span>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <label asp-for="ADR.MELRef" class="form-label"></label>
            <input asp-for="ADR.MELRef" class="form-control deferred" />
            <span asp-validation-for="ADR.MELRef" class="text-danger"></span>
        </div>
        <div class="col-sm-2">
            <label asp-for="ADR.DeferralExpiry" class="form-label"></label>
            <kendo-datepicker for="ADR.DeferralExpiry" class="form-control deferred"></kendo-datepicker>
            <span asp-validation-for="ADR.DeferralExpiry" class="text-danger"></span>
        </div>
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <a class="btn btn-outline-secondary" asp-page="./Index"> Close</a>
        <input type="submit" id="Submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

javascript jquery asp.net-core jquery-validate unobtrusive-validation

[HtmlTargetElement("input", Attributes = ValidateFor + "," + ValidClass)]
    public class ValidationErrorClassTagHelper : TagHelper
    {
        private const string ValidateFor = "validate-for";

        private const string ValidClass = "invalid-class";

        [HtmlAttributeName(ValidateFor)]
        public ModelExpression For { get; set; } 

        [HtmlAttributeName(ValidClass)]
        public string ValidateErrorClass { get; set; } = "";

        [HtmlAttributeNotBound]
        [ViewContext]
        public ViewContext ViewContext { get; set; } 

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            ViewContext.ViewData.ModelState.TryGetValue(For.Name, out ModelStateEntry entry);
            if (entry != null && entry.Errors.Any())
            {
                output.Attributes.SetAttribute("class", "form-control "+ ValidateErrorClass); 
            }
        }
    }

注册标记助手_viewimports.cshtml

在 View 中，向输入元素添加属性：

<input validate-for="Name" invalid-class="is-invalid" asp-for="Name" class="form-control" />

在我的身边，它的工作原理是：

服务器端验证忽略非侵入式验证中的自定义 errorClass

Custom errorClass in Unobtrusive Validation ignored with Server Side Validation

评论

评论