I am trying to get an email for my form to be validated like equalTo using the new Bootstrap 4. If possible i just want to use Bootstrap 4 and don't want to have to include any other library. I assume It just needs something in the javascript at the bottom that checks for matching fields. Any help is appreciated. I am surprised no one else has asked for this, or indeed an example is not on the Bootstrap website. I would imagine it to be a mon requirement.
<!DOCTYPE html>
<html>
<head>
<title>JQuery-validation demo | Bootstrap</title>
<?php
echo '<link rel="stylesheet" href=".1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">Email</label>
<input type="Email" class="form-control" id="email" placeholder="Email" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Confirm Email</label>
<input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" required>
<div class="valid-feedback">
Emails should match
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(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');
// check match
// 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>
</body>
</html>I am trying to get an email for my form to be validated like equalTo using the new Bootstrap 4. If possible i just want to use Bootstrap 4 and don't want to have to include any other library. I assume It just needs something in the javascript at the bottom that checks for matching fields. Any help is appreciated. I am surprised no one else has asked for this, or indeed an example is not on the Bootstrap website. I would imagine it to be a mon requirement.
<!DOCTYPE html>
<html>
<head>
<title>JQuery-validation demo | Bootstrap</title>
<?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">Email</label>
<input type="Email" class="form-control" id="email" placeholder="Email" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Confirm Email</label>
<input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" required>
<div class="valid-feedback">
Emails should match
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(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');
// check match
// 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>
</body>
</html>- have you checked out the validation part in the Bootstrap docs under forms? Here is the link: getbootstrap./docs/4.0/ponents/forms/#validation – Corné Commented Dec 14, 2018 at 11:14
- My issue is checking email = validation email. If not then display an error. I am trying to make sure people don't have typos in there emails. The Bootstrap email format check is fine. – Chris Commented Dec 17, 2018 at 13:50
- Is this what you are looking for? stackoverflow./questions/46155/… – Corné Commented Dec 18, 2018 at 8:00
- The email validation is fine for an individual one. What i am really after is the something that will look at the first email and pare it against the other email. If they are not the same email address, halt the submission of the form. I would expect something inside the javascript that way like if (email.val <> confirm_email.val) then raise an error. – Chris Commented Dec 18, 2018 at 13:39
- 1 Oh, I understand what you are after now. I found this: stackoverflow./questions/30020681/… It sounds like this is what you are after? – Corné Commented Dec 18, 2018 at 13:44
1 Answer
Reset to default 2try to use all the links properly... it will works
// Example starter JavaScript for disabling form submissions if there are invalid fields
(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');
// check match
// 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();
}
var email = $("#email").val();
var confirmemail = $("#confirm_email").val();
if(email !== confirmemail){
form.classList.add('was-validated');
$("#validate").html("Email Should Match");
$("#validate").addClass("error");
$("#confirm_email").addClass("error-text");
event.preventDefault();
event.stopPropagation();
}
else{
$("#validate").removeClass("error");
form.classList.add('was-validated');
$("#confirm_email").removeClass("error-text");
$("#validate").html("Looks Good!");
}
}, false);
});
}, false);
})();.error{
color:red !important;
}
.error-text{
border:1px solid red !important;
}<!DOCTYPE html>
<html>
<head>
<title>JQuery-validation demo | Bootstrap</title>
<!--<?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">Email</label>
<input type="Email" class="form-control" id="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Confirm Email</label>
<input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
<div id="validate" class="valid-feedback">
Emails should match
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744284071a4566713.html
评论列表（0条）