英文:
JQuery Validation of Form
问题
我正在尝试使用Jquery验证修改errorClass和validClass，但遇到了很多麻烦。
我假设我只需要添加.validate函数并设置参数即可。
尽管验证确实触发并显示了验证消息，但类仍然被更改为标准的“input-validation-error”或“valid”。
在浏览器中没有抛出任何JQuery错误。
我认为问题可能与不显眼的插件有关，它阻止了jquery.validate设置的应用。
> JQuery v3.7.0, Jquery-validate v1.19.5, Jquery-validate-unobtrusive
> v4.0.0
脚本:
@section Scripts {
$(document).ready(function (e) {
$("#myForm").validate({
errorClass: "is-invalid",
validClass: "is-valid"
});
});
}
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>
头部:
<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>
英文:
I am having a lot of trouble trying to modify the errorClass and validClass with Jquery validation.
I assume all I need to do is add the .validate function and set the parameters.
Whilst the validation does fire and the validation message is shown, the classes are still changed to the standard "input-validation-error" or "valid".
There are no JQuery errors thrown in the browser.
I believe the problem may be something to do with the unobtrusive plugin preventing the jquery.validate settings being applied.
> JQuery v3.7.0, Jquery-validate v1.19.5, Jquery-validate-unobtrusive
> v4.0.0
Script:
@section Scripts {
$(document).ready(function (e) {
$("#myForm").validate({
errorClass: "is-invalid",
validClass: "is-valid"
});
});
}
Razor Page:
<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>
Header:
<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>
答案1
得分: 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");
},
});
</script>
Result:
[![enter image description here][1]][1]
注意：代码部分未翻译，保持原样。
英文:
You may try as below:
<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");
},
});
</script>
Result:
答案2
得分: 0
使用.setDefaults中的highlight和unhighlight函数会在提交按钮使用之前触发验证。
对我而言的解决方案是在验证器和不显眼设置中都设置自定义类。
const validationCustomSettings = {
validClass: "is-valid",
errorClass: "is-invalid",
};
jQuery.validator.setDefaults(validationCustomSettings);
jQuery.validator.unobtrusive.options = validationCustomSettings;
英文:
Using the highlight and unhighlight functions within .setDefaults causes the validation to fire before the submit button is used.
The solution for myself was instead to set the custom classes in both the validator and unobtrusive settings.
const validationCustomSettings = {
validClass: "is-valid",
errorClass: "is-invalid",
};
jQuery.validator.setDefaults(validationCustomSettings);
jQuery.validator.unobtrusive.options = validationCustomSettings;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论