引导4窗体验证作为用户类型
引导4窗体验证作为用户类型
提问于 2019-11-04 16:46:57
我在一个简单的index.php中重新创建了我的问题，它有2个输入和1个按钮，可以重定向到page2.php。
我有BS-4表单验证，输入标签有正则表达式.
问题1:只在我单击按钮后才进行验证。不是我打字的时候。
问题2:当刷新和不输入任何内容时，按钮将我重定向到page2.php。
我认为罪魁祸首是：addEventListener('load')，但我不确定，因为我是新的PHP，JS，引导和生活的一般.
任何想法都会很感激的！
以下是代码：
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-04 17:12:00
如果不希望在任何输入为空时提交表单，则需要向其添加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58697762
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号