我用HTML和Bootstrap 5创建了一个注册页面。我在Bootstrap的帮助下为这个页面做了一个验证。注册完成后，将出现一个Modal。然而，有一个问题。即使表单部分中有空白，也就是说，即使存在验证错误，也会打开Modal。我该如何预防呢?
我写了这样的代码:
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
@media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<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>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>谢谢你的帮助。
我想不出一个解决办法。
捕获show.bs.modal并再次测试有效性
或者计算.was-validated的数量是否等于页面上的表单数量
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
[...forms]
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
document.getElementById('exampleModal').addEventListener('show.bs.modal', function(e) {
const errors = [...forms].some(form => !form.checkValidity());
if (errors) e.preventDefault();
});
})()body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
@media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<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>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>这个版本只有一个表单
(function() {
'use strict'
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', (e) => {
const thisForm = e.target;
if (!thisForm.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
thisForm.classList.add('was-validated')
});
document.getElementById('exampleModal').addEventListener('show.bs.modal', (e) => {
if (!form.checkValidity()) e.preventDefault();
});
})()body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
@media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<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>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>