如何從有效控件禁用引導程序 4 驗證樣式
[英]How to disable bootstrap 4 validation style from valid controls
問題描述
我正在為我的應用程序使用 bootstrap 4 樣式。 應用程序有兩個文本框和一個提交按鈕。 當您單擊“保存”按鈕時，它將調用 Web API 並異步獲取一些詳細信息（它不會重定向頁面）。 驗證僅適用於第一個文本框。
(function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })();
<!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Test Page</title> </head> <body> <form class="container needs-validation" novalidate> <div class="form-group row mt-5"> <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label> <div class="col-sm-10"> <input type="tel" class="form-control" placeholder="Please enter your name" required /> <div class="invalid-feedback"> Please enter the name. </div> </div> </div> <div class="form-group row mt-5"> <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label> <div class="col-sm-10"> <input type="tel" class="form-control" /> </div> </div> <div class="form-group row"> <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save" /> </div> </form> </body> </html>
我的問題：
當我單擊“保存”按鈕而不在文本框中輸入任何值時，綠色樣式（驗證真實樣式）將應用於“地址”文本框。 我不希望這種情況發生。
如果驗證失敗，我只需要應用紅色樣式（驗證失敗樣式）。 如果輸入了值（驗證為真），我不需要對文本框應用任何樣式。
此外，當我在“名稱”文本框中輸入一些值並單擊“保存”按鈕時，我不希望該文本框使用綠色樣式。
截屏：
9 個解決方案
解決方案1
9 已采納 2019-05-10 11:21:21
一方面，我不喜歡覆蓋 CSS 樣式，因此您也可以選擇僅指定要驗證的字段而不是整個表單。
向您的.form-group元素添加一個類（例如.validate-me ）
<form class="container needs-validation" novalidate>
<div class="form-group row mt-5 validate-me">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" formnovalidate="formnovalidate" id="address" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
現在稍微更改您的 JavaScript，使用validate-me類檢索所有form-group ，而不是調用form.classList.add('was-validated')循環遍歷所有捕獲的表單組並將was-validated添加到它們反而。
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Get all form-groups in need of validation
var validateGroup = document.getElementsByClassName('validate-me');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
//Added validation class to all form-groups in need of validation
for (var i = 0; i < validateGroup.length; i++) {
validateGroup[i].classList.add('was-validated');
}
}, false);
});
}, false);
解決方案2
4 2019-05-10 10:59:23
您可以覆蓋 is-valid 驗證的 css。 當您右鍵單擊綠色復選框並選擇檢查時，您可以看到哪個類導致綠燈
所以你應該指定不從引導程序繼承那些。 代碼應該是這樣的：
<!DOCTYPE html>
<html>
<head>
<style>
.form-control.is-valid:focus, .was-validated :valid.form-control{ border-color:inherit !important;
background-image: inherit !important;
box-shadow:inherit !important;}
</style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test Page</title>
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<form class="container needs-validation" novalidate id="myFrom" >
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
</body>
</html>
我添加的是head標簽下方的style標簽和css選項。
解決方案3
4 2019-08-31 00:38:39
你可能想看看這個答案。
具體來說，不是將.was-validated添加到整個表單，而是僅將.is-invalid添加到具有:invalid偽類的表單元素。
此代碼應該適用於您的情況：
for (var i = 0; i < validateGroup.length; i++) {
var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
for (var j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
}
}
解決方案4
2 2019-11-05 17:42:39
(function () {
'use strict';
window.addEventListener('load', function () {
const forms = document.getElementsByClassName('needs-validation');
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
const invalidGroup = form.querySelectorAll(":invalid");
for (let j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
}
}, false);
});
}, false);
})();
解決方案5
1 2020-09-13 20:23:13
覆蓋$form-validation-states scss 變量。 這在 Bootstrap 5 中有記錄，但相同的技術適用於版本 4。
https://v5.getbootstrap.com/docs/5.0/forms/validation/#customizing
$form-validation-states: (
"valid": ( <-- delete this
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);
解決方案6
0 2019-09-26 18:24:23
來自@Ilker Kadir Ozturk 的帖子僅通過使用樣式為我工作，除了我的有效字段邊框繼承自我不想使用的先前顏色（黑色）。 我在剃刀頁面中使用 Bootstrap 4 和 ASP.NET MVC。 這是他用我的顏色（#DDDDDD）調整的代碼。 我也在樣式上方包含了我的評論：
@* This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
Only the red color style(validation failed style) should be applied if the validation failed.
If the values are ok, no styling should be applied to the text boxes.
Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
*@
<style>
.form-control.is-valid:focus, .was-validated :valid.form-control {
border-color: #DDDDDD !important;
background-image: inherit !important;
box-shadow: inherit !important;
}
</style>
解決方案7
0 2020-12-01 16:50:21
在驗證成功的情況下刪除樣式的部分解決方案
如果form.checkValidity()評估為 true，則從表單中刪除was-validated類。
React Bootstrap 中的一個例子：
有<Form noValidate validated={this.state.validated} onSubmit={this.onSubmit}>
onSubmit = (e) => this.setState({ validated: !e.currentTarget.checkValidity()});
解決方案8
0 2020-12-21 20:12:05
這是我使用 jQuery 解決類似問題的解決方案：
在您的提交方法中，在調用checkValidity()后插入以下幾行：
$("#myForm").find(":valid").parent().removeClass("was-validated"); // Optional: Removes all green borders that have been fixed since last submit attempt
$("#myForm").removeClass("needs-validation");
$("#myForm").find(":invalid").parent().addClass("was-validated");
此解決方案僅向無效輸入添加紅色邊框。 但是，一旦它們得到糾正，它們將顯示為綠色邊框，但就我個人而言，如果只有一個輸入無效，我仍然更喜歡它而不是一片綠色的田野......
解決方案9
0 2021-12-06 17:29:14
我想用一個例子來總結一下。 這一項包括：
- 您需要添加類值的某些字段的驗證
“驗證我” - 移除綠色驗證樣式
- 刷新無效驗證
此示例將包含三個 html 輸入：
此示例的 html 代碼是：
<form class="needs-validation " novalidate>
<div class="validate-me">
<label for="firstNameId">First name</label>
<input type="text" class="form-control" id="firstNameId" required>
<div class="invalid-feedback">
Please provide a first name.
</div>
</div>
<div class="">
<label for="miId">MI</label>
<input type="text" class="form-control" id="miId" required>
<div class="invalid-feedback">
Please provide a MI name.
</div>
</div>
<div class="validate-me">
<label for="lastNameId">Last name</label>
<input type="text" class="form-control" id="lastNameId" required>
<div class="invalid-feedback">
Please provide a last name.
</div>
</div>
...
</form>
驗證包括以下 js 函數：
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Get all form-groups in need of validation
var validateGroup = document.getElementsByClassName('validate-me');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
//Added validation class to diva in need of validation
for (var i = 0; i < validateGroup.length; i++) {
var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
for (var j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
invalidGroup[j].addEventListener("input", e => e.target.classList.remove("is-invalid"), { once: true });
}
}
}, false);
});
}, false);
因此，驗證將僅應用於具有類值的字段：“validate-me”，綠色驗證將被刪除，紅色無效消息將自動刷新。
沒有綠色驗證的示例：
在網絡瀏覽器中禁用Javascript應該禁用服務器驗證控件
[英]Disable Javascript in web browser should disable the server validation controls
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.