Chr*_*ris 5 javascript bootstrap-4
我正在尝试使用新的 Bootstrap 4 获取像 equalTo 一样验证我的表单的电子邮件。如果可能，我只想使用 Bootstrap 4 而不想包含任何其他库。我认为它只需要底部的 javascript 中的一些内容来检查匹配的字段。任何帮助表示赞赏。我很惊讶没有其他人要求这样做，或者 Bootstrap 网站上确实没有一个例子。我想这是一个普遍的要求。
<!DOCTYPE html>
<html>
<head>
<title>JQuery-validation demo | Bootstrap</title>
<?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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>尝试正确使用所有链接...它会起作用
// 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.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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>| 归档时间： |
|
| 查看次数： |
12709 次 |
| 最近记录： |