使用Javascript/jQuery的Bootstrap 4表单验证
我是网络开发新手,正在尝试建立一个实践表单来学习表单验证。我遵循Bootstrap的自定义样式,以处理那些使用屏幕阅读器的可访问性问题,并将验证外观标准化为跨不同浏览器的用户 我已经建立了一个基本表单,并且正在尝试使用jQuery创建一个JavaScript函数来处理验证。我感觉我就快到了,但仍然没有在引导演示显示时进行验证 index.html使用Javascript/jQuery的Bootstrap 4表单验证,javascript,jquery,twitter-bootstrap,validation,bootstrap-4,Javascript,Jquery,Twitter Bootstrap,Validation,Bootstrap 4,我是网络开发新手,正在尝试建立一个实践表单来学习表单验证。我遵循Bootstrap的自定义样式,以处理那些使用屏幕阅读器的可访问性问题,并将验证外观标准化为跨不同浏览器的用户 我已经建立了一个基本表单,并且正在尝试使用jQuery创建一个JavaScript函数来处理验证。我感觉我就快到了,但仍然没有在引导演示显示时进行验证 index.html <form id="signup-form" novalidate> <div class="form-group">
<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="name@example.com" 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>
问题是checkValidity()存在于第一个表单节点上,而不是表单上 更改此项:
form.checkValidity()==false
对此:表单[0]。checkValidity()==false
它的工作原理是:
有关Bootstrap 4验证的更多信息:
请编辑问题以澄清问题所在。什么不起作用?谢谢你给我的问题格式的提示。我注意到,当添加单选按钮输入时,即使它们没有
required
属性,标签
文本前景在表单验证时变为绿色。是否有方法执行无验证或绕过验证,以阻止单选按钮标签
s'前景变绿,因为它是默认情况下必须选择的两个选项之一(总共两个单选按钮)?我只是想知道为什么会发生这种情况,因为它看起来很奇怪,特别是如果required
属性没有放在任何一个单选按钮input
上。这听起来像是一个单独的问题。用代码示例发布一个新问题
$(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')
})
})
$(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
})
})