jquery 自定义错误服务器端验证忽略非侵入性验证中的类

我在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.");

型
Razor页面：

<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>

型

class属性现在与jquery validate没有关系（您可以尝试删除相关的js文件，它仍然是input-validation-error），它是由TagHelper生成的
你需要一个TagHelper，比如：

[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中注册标记助手
在“视图”中，向输入元素添加属性：

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

型
在我这边，它是有效的：

的数据

jquery 自定义错误服务器端验证忽略非侵入性验证中的类

1条答案

相关问题

热门标签

最新问答