I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's doc for Custom Styles to handle those with accessibility issues that use screen readers, and to standardize the validation appearance to users across different browsers.
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.
index.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
$(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')
})
})
I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's doc for Custom Styles to handle those with accessibility issues that use screen readers, and to standardize the validation appearance to users across different browsers.
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.
index.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
$(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')
})
})
- Please edit the question to clarify what the problem is. What's not working? – Carol Skelly Commented Feb 14, 2018 at 22:19
1 Answer
Reset to default 12The problem is that checkValidity() exists on the first form node, not the form.
Change this: form.checkValidity() === false
to this: form[0].checkValidity() === false
and it works: https://www.codeply./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