bootstrap 4 验证禁用提交按钮直到表单验证
bootstrap 4 validation disable submit button until form validated
在下面的问题示例中,我有 2 个字段需要验证。
在验证所有(在本例中为 2 个)字段之前,应禁用提交按钮。
如果两者都经过验证,则应启用它。
我的问题:第一个字段验证的那一刻 - 按钮启用,这太早了。
我明白(不认为我明白)这是因为我放置 $("#submitBtn").attr("disabled",false);
的位置
任何关于如何让它工作的提示都将不胜感激。
编辑:有关仅在验证所有表单元素时才启用提交按钮的完整注册表示例,请参阅。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red; }
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid')
input.classList.add('is-valid');
$("#submitBtn").attr("disabled",false); <<<<======== ??????
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
});
});
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
});
</script>
我不知道这是不是好方法,它也取决于您的要求,如果它满足您的需要,那很好..
这里我要删除一些行并添加一些行
- 从第一个条件中删除禁用按钮代码并在最后添加
if(input.checkValidity() && index ===1) {
$("#submitBtn").attr("disabled", false);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red; }
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach((input, index) => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
console.log(input.checkValidity());
input.classList.remove('is-invalid')
input.classList.add('is-valid');
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
if(input.checkValidity() && index ===1) {
$("#submitBtn").attr("disabled", false);
}
});
});
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
});
</script>
</body>
</html>
在假设我们可以启用它之前,我们需要检查所有其他输入是否也有效
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
/* IF IT PASSES WE NEED TO CHECK THE OTHER INPUTS */
/* STORE ALL THE INPUTS THAT PASS THE CHECKVALIDITY */
let allValid = currForm1.querySelectorAll('.form-control').filter(input =>
{ return input.checkValidity() })
/* WE CAN NOW UPDATE THE SUBMIT BASED ON THE NUMBER OF VALID
INPUTS WE HAVE */
$("#submitBtn").attr("disabled", allValid.length === currForm1.querySelectorAll('.form-control').length);
input.classList.remove('is-invalid')
input.classList.add('is-valid');
} else {
/* IF IT FAILS WE DONT NEED TO CHECK WE WANT THE VALIDATOR AS FALSE */
$("#submitBtn").attr("disabled", true);
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
});
});
/* FINALLY WE CAN UPDATE THE SUBMIT, BASED ON OUR VARIABLE */
$("#submitBtn").attr("disabled", validatorForSubmit );
在您的输入事件侦听器中检查是否所有输入都有 is-valid
class。如果您的所有输入都有 is-valid
class,请关闭禁用按钮。
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid')
input.classList.add('is-valid');
// $("#submitBtn").attr("disabled",false); <<<<======== ??????
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
$("#submitBtn").attr("disabled", !is_valid);
});
});
在下面的问题示例中,我有 2 个字段需要验证。
在验证所有(在本例中为 2 个)字段之前,应禁用提交按钮。
如果两者都经过验证,则应启用它。
我的问题:第一个字段验证的那一刻 - 按钮启用,这太早了。
我明白(不认为我明白)这是因为我放置 $("#submitBtn").attr("disabled",false);
任何关于如何让它工作的提示都将不胜感激。
编辑:有关仅在验证所有表单元素时才启用提交按钮的完整注册表示例,请参阅
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red; }
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid')
input.classList.add('is-valid');
$("#submitBtn").attr("disabled",false); <<<<======== ??????
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
});
});
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
});
</script>
我不知道这是不是好方法,它也取决于您的要求,如果它满足您的需要,那很好..
这里我要删除一些行并添加一些行
- 从第一个条件中删除禁用按钮代码并在最后添加
if(input.checkValidity() && index ===1) {
$("#submitBtn").attr("disabled", false);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red; }
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (3 to 6 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach((input, index) => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
console.log(input.checkValidity());
input.classList.remove('is-invalid')
input.classList.add('is-valid');
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
if(input.checkValidity() && index ===1) {
$("#submitBtn").attr("disabled", false);
}
});
});
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
});
</script>
</body>
</html>
在假设我们可以启用它之前,我们需要检查所有其他输入是否也有效
let currForm1 = document.getElementById('myForm1');
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
/* IF IT PASSES WE NEED TO CHECK THE OTHER INPUTS */
/* STORE ALL THE INPUTS THAT PASS THE CHECKVALIDITY */
let allValid = currForm1.querySelectorAll('.form-control').filter(input =>
{ return input.checkValidity() })
/* WE CAN NOW UPDATE THE SUBMIT BASED ON THE NUMBER OF VALID
INPUTS WE HAVE */
$("#submitBtn").attr("disabled", allValid.length === currForm1.querySelectorAll('.form-control').length);
input.classList.remove('is-invalid')
input.classList.add('is-valid');
} else {
/* IF IT FAILS WE DONT NEED TO CHECK WE WANT THE VALIDATOR AS FALSE */
$("#submitBtn").attr("disabled", true);
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
});
});
/* FINALLY WE CAN UPDATE THE SUBMIT, BASED ON OUR VARIABLE */
$("#submitBtn").attr("disabled", validatorForSubmit );
在您的输入事件侦听器中检查是否所有输入都有 is-valid
class。如果您的所有输入都有 is-valid
class,请关闭禁用按钮。
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid')
input.classList.add('is-valid');
// $("#submitBtn").attr("disabled",false); <<<<======== ??????
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
$("#submitBtn").attr("disabled", !is_valid);
});
});