引导4验证和密码确认，并禁用提交，直到表单通过验证(注册表单) [英] bootstrap 4 validation with password confirmation and submit disabled until form validated (Registration form)
本文介绍了引导4验证和密码确认，并禁用提交，直到表单通过验证(注册表单)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在一个简单的形式中，每个字段中都有3个带有正则表达式模式的输入字段.
其中两个(密码"和确认密码")必须匹配.如果不匹配，则显示消息不匹配".如果这样做，则显示有效".
In a simple form there are 3 input fields with regex pattern in each.
Two of them ('Password' and 'Confirm Password') must match. If the don't, a message "Not Matching" is displayed. If they do, "Valid" is displayed.
在以下情况下，如何(通过javascript)强制显示Bootstrap 4验证的红色边框和"X"图标:
How can I (via the javascript) force the Bootstrap 4 validation's red border and 'X' icon to be displayed in the following case :
在密码"字段中输入"aa"(它与正则表达式匹配，因此匹配有效的绿色边框和V图标).
在确认密码"字段中输入"aa"(它与正则表达式匹配，因此为有效的绿色边框和V图标).
现在，我在确认密码"中添加了另一个字符，它立即显示"Not Matching"，但是根据正则表达式，它没问题-它仍然是绿色的，带有"V"图标.
Entering 'aa' in the 'Password' field (it matches the regex hence the valid green border and V icon).
Entering 'aa' in the 'Confirm Password' field (it matches the regex hence the valid green border and V icon).
Now I add another character to 'Confirm Password' and it immediately displays "Not Matching", but since it's ok according to the regex - it is still green with a 'V' icon.
发生这种情况时，我需要强行使用红色边框和"X"图标.
I need to force the red border and 'X' icon when this happens.
我的代码:
<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">
Field1<input type="text" class="form-control" pattern="^[a-z]{2,4}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Confirm Password<input type="text" id="cPwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
<div id="cPwdValid" class="valid-feedback">Valid</div>
<div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 4 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>
$(document).ready(function(){
// Check if passwords match
$('#pwdId, #cPwdId').on('keyup', function () {
if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val()) {
$("#submitBtn").attr("disabled",false);
$('#cPwdValid').show();
$('#cPwdInvalid').hide();
$('#cPwdValid').html('Valid').css('color', 'green');
} else {
$("#submitBtn").attr("disabled",true);
$('#cPwdValid').hide();
$('#cPwdInvalid').show();
$('#cPwdInvalid').html('Not Matching').css('color', 'red');
}
});
let currForm1 = document.getElementById('myForm1');
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
// 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');
} 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);
});
});
});
</script>
谢谢！
推荐答案
在@Zim的帮助下，我开始并设法解决了这个问题.
With help from @Zim I got started and managed to solve it.
以下是完整注册表格的代码，其中包含两个密码的比较.
Following is the code for a full Registration form with comparison of the 2 passwords.
请注意，仅当表单中的所有元素均有效时，才启用提交"按钮！
Notice that the Submit button is enabled ONLY when all elements in the form are valid!
注释1 :我已经对其进行了广泛的测试，但它可能存在错误或设计缺陷(如果发现一个缺陷，请告诉我们).
Note 1 : I tested it extensively but it might have a bug or a design flaw (please let us all know about it if you find one).
注释2 :关于Javascript和JQuery，我仅在两周前出生，所以我想我的解决方案并不尽如人意(再次，让我们都知道如果可以改善的话).
Note 2 : When it comes to Javascript and JQuery, I was born a mere 2 weeks ago, so I guess my solution is not as elegant as can possibly be (again, let us all know if you can improve it).
这是完整的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Registration</title>
<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" style="background-color: lightblue;">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<h1 class="text-center">Registration</h1><hr>
<div class="form-group">
First Name<input name="myInput" id="fisrtNameId" type="text" class="form-control" pattern="^[a-z]{2,15}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 15 long)</div>
</div>
<div class="form-group">
Last Name<input name="myInput" id="lastNameId" type="text" class="form-control" pattern="^[a-z]{2,15}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 15 long)</div>
</div>
<div class="form-group">
E-mail<input type="email" name="myInput" id="emailId" class="form-control" pattern="^[a-zA-Z0–9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61} [a-zA-Z0–9])?(?:\.[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61}[a-zA-Z0–9])?)*$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Not a valid email address</div>
</div>
<div class="form-group">
Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 6 long)</div>
</div>
<div class="form-group">
Confirm Password<input type="text" id="cPwdId" class="form-control myCpwdClass" pattern="^[a-z]{2,6}$" required>
<div id="cPwdValid" class="valid-feedback">Passwords Match</div>
<div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 6 long)</div>
</div>
<div class="form-group">
Description<textarea form="myForm1" name="myInput" id="descId" type="text" class="form-control" required></textarea>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Required</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="agreeId" class="custom-control-input form-control" required>
<label for="agreeId" id="agreeLabelId" class="custom-control-label">Agree to terms <a href="https://www.youtube.com/watch?v=5_nWGG_TFDM" target="_blank"> (terms & conditions)</a></label>
<div id="agreeValid" class="valid-feedback">Valid</div>
<div id="agreeInvalid" class="invalid-feedback">Needs to be checked</div>
</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-secondary" disabled>Register</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>
$(document).ready(function(){
// ----------- Set all elements as INVALID --------------
var myInputElements = document.querySelectorAll(".form-control");
var i;
for (i = 0; i < myInputElements.length; i++) {
myInputElements[i].classList.add('is-invalid');
myInputElements[i].classList.remove('is-valid');
}
// ------------ Check passwords similarity --------------
$('#pwdId, #cPwdId').on('keyup', function () {
if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val() ) {
$('#cPwdValid').show();
$('#cPwdInvalid').hide();
$('#cPwdInvalid').html('Passwords Match').css('color', 'green');
$('.myCpwdClass').addClass('is-valid');
$('.myCpwdClass').removeClass('is-invalid');
$("#submitBtn").attr("disabled",false);
$('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
for (i = 0; i < myInputElements.length; i++) {
var myElement = document.getElementById(myInputElements[i].id);
if (myElement.classList.contains('is-invalid')) {
$("#submitBtn").attr("disabled",true);
$('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
break;
}
}
} else {
$('#cPwdValid').hide();
$('#cPwdInvalid').show();
$('#cPwdInvalid').html('Not Matching').css('color', 'red');
$('.myCpwdClass').removeClass('is-valid');
$('.myCpwdClass').addClass('is-invalid');
$("#submitBtn").attr("disabled",true);
$('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
}
});
// ----------------- Validate on submit -----------------
let currForm1 = document.getElementById('myForm1');
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else {
$("#submitBtn").attr("disabled",false);
$('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
currForm1.classList.add('was-validated');
}
}, false);
// ----------------- 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');
} 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);
if (is_valid) {
$("#submitBtn").attr("disabled",false);
$('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
} else {
$("#submitBtn").attr("disabled",true);
$('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
}
});
});
// ------------------------------------------------------
});
</script>
</body>
</html>
这篇关于引导4验证和密码确认，并禁用提交，直到表单通过验证(注册表单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
