J表单验证-解网

问：

我在尝试使用 Jquery 验证修改 errorClass 和 validClass 时遇到了很多麻烦。

我假设我需要做的就是添加 .validate 函数并设置参数。

虽然验证确实触发并显示验证消息，但类仍更改为标准的“input-validation-error”或“valid”。

浏览器中没有抛出 JQuery 错误。

我相信问题可能与不显眼的插件阻止应用jquery.validate设置有关。

JQuery v3.7.0、Jquery-validate v1.19.5、Jquery-validate-unobtrusive 4.0.0 版

脚本：

@section Scripts {
  $(document).ready(function (e) {
            $("#myForm").validate({
                errorClass: "is-invalid",
                validClass: "is-valid"
            });
  });
}

剃刀页面：

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

页眉：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FlightLog</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> 
  
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>    
   
    <link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/cultures/kendo.culture.en-NZ.min.js"></script>       
</head>

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

“我相信问题可能与不显眼的插件阻止应用jquery.validate设置有关。”-完全。使用 Unobtrusive 时，参数会自动构造和应用。当你构建自己的时，它们将被忽略。该插件只关注第一个实例，忽略其余实例。可以使用粗略的解决方法，因为这是定义参数的另一种方法，但时机至关重要。.validate().validate().setDefaults()

0赞 Reafidy 7/19/2023

@Sparky，谢谢 - 这让我在写入路径上，奇怪地使用 .setDefaults（），validClass 确实有效，但 errorClass 要么被忽略，要么被覆盖。

答：

1赞 Ruikai Feng 7/18/2023 #1

您可以尝试以下操作：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
 <script>
$.validator.setDefaults({
    validClass: "is-valid",
    // set error class doesn't work here ,so i have to try with hard code for error class
    //errorClass: "is-invalid",
          
    highlight: function (element, errorClass, validClass) {
        $(element).addClass("is-invalid").removeClass(validClass);
        
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).addClass(validClass).removeClass("is-invalid");
    },
});

结果：

J表单验证

JQuery Validation of Form

评论

评论