我在一个简单的index.php中重新创建了我的问题，其中包含2个输入和1个重定向到page2.php的按钮。
我有 BS-4 表单验证，输入标签有正则表达式模式。
问题 1:它仅在我单击按钮后才进行验证。不像我打字的那样。
问题 2:刷新且未输入任何内容时，按钮会将我重定向到 page2.php。
我认为罪魁祸首是: addEventListener('load') 但我不确定，因为我对 PHP、JS、Bootstrap 和一般生活都是新手......
如果有任何想法，我将不胜感激!
代码如下:
<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="page1.php" id="myForm1" class="was-validation" novalidate>
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" 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}$" 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">
<button type="submit" class="btn btn-primary">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>
(function() {
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
});
})();
</script>最佳答案
如果您不想在任何输入为空时允许提交表单，则需要为其添加 required 属性，下面是一个示例:
window.addEventListener('load', function() {
let currForm1 = document.getElementById('myForm1');
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
// Validate on input:
currForm1.querySelectorAll('input').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');
}
});
});
});<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="page1.php" id="myForm1" class="was-validation" novalidate="z">
<div class="form-group">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus 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">
<input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus 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 type="submit" class="btn btn-primary">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>关于javascript - 当用户键入时 bootstrap 4 表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58697762/