twitter-bootstrap 使用 Javascript / jQuery 进行 Bootstrap 4 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48796730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Form Validation with Javascript /jQuery
提问by Matthew
I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's docfor Custom Styles to handle those with accessibility issues that use screen readers, and to standardize the validation appearance to users across different browsers.
我是 Web 开发的新手，正在尝试建立一个练习表单来学习表单验证。我正在关注 Bootstrap 的自定义样式文档，以处理那些使用屏幕阅读器的可访问性问题，并标准化不同浏览器中用户的验证外观。
I have set up a basic form as well as am trying to create a JavaScript function using jQuery to handle the validation. I feel like I am almost there, but still do not have the validation working as the Bootstrap demo displays.
我已经设置了一个基本表单，并且正在尝试使用 jQuery 创建一个 JavaScript 函数来处理验证。我觉得我快到了，但仍然没有像 Bootstrap 演示显示的那样进行验证。
index.html
索引.html
<form id="signup-form" novalidate>
<div class="form-group">
<h1>Sign Up</h1>
<p>Use this form to enter your name and email to sign up.</p>
</div>
<!-- Name -->
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstNameInput">Name</label>
<input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col">
<label for="lastNameInput">Last</label>
<input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="emailAddressInput">Email address</label>
<input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="[email protected]" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<!-- Options -->
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
<label class="form-check-label" for="type1RadioButton">
Type 1 user
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
<label class="form-check-label" for="type2RadioButton">
Type 2 user
</label>
</div>
</div>
<!-- Submit Button -->
<div class="form-group">
<a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
</div>
</form>
script.js
脚本.js
$(document).ready(function() {
$("#submitButton").click(function() {
//Fetch form to apply custom Bootstrap validation
var form = $("#signup-form")
//alert(form.prop('id')) //test to ensure calling form correctly
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated')
})
})
回答by Zim
The problem is that checkValidity() exists on the firstform node, not the form.
问题是 checkValidity() 存在于第一个表单节点上，而不是表单上。
Change this: form.checkValidity() === false
改变这个： form.checkValidity() === false
to this: form[0].checkValidity() === false
对此： form[0].checkValidity() === false
and it works: https://www.codeply.com/go/pUPBLzn6yL
它有效：https: //www.codeply.com/go/pUPBLzn6yL
$(document).ready(function() {
$("#submitButton").click(function() {
//Fetch form to apply custom Bootstrap validation
var form = $("#signup-form")
alert(form.prop('id')) //test to ensure calling form correctly
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated');
//Make ajax call here
})
})
More on Bootstrap 4 Validation:
Can't make the validation work in Bootstrap 4
有关 Bootstrap 4 验证的更多信息：
无法在 Bootstrap 4 中进行验证
