jQuery表单验证

slwdgvem 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(169)

我在尝试用Jquery验证修改errorClass和validClass时遇到了很多麻烦。
我假设我所需要做的就是添加.validate函数并设置参数。
虽然验证确实触发并且显示了验证消息，但是类仍然被更改为标准的“input-validation-error”或“valid”。
在浏览器中没有抛出任何JQuery错误。
我相信这个问题可能与阻止应用jquery.validate设置的不显眼的插件有关。
JQuery 3.7.0版、JQuery验证1.19.5版、JQuery验证非强制性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>

型

jquery

来源：https://stackoverflow.com/questions/76708829/jquery-validation-of-form

2条答案

按热度按时间

up9lanfz1#

您可以尝试以下操作：

<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");
    },
});

字符串
测试结果：

的数据

赞(0）回复(0）举报 2023-08-04

fcipmucu2#

使用.setDefaults中的highlight和unhighlight函数会导致验证在使用提交按钮之前触发。
我自己的解决方案是在验证器和不显眼的设置中设置自定义类。

const validationCustomSettings = {
    validClass: "is-valid",
    errorClass: "is-invalid",
};
       
jQuery.validator.setDefaults(validationCustomSettings);           
jQuery.validator.unobtrusive.options = validationCustomSettings;

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jQuery表单验证

2条答案

相关问题

热门标签

最新问答