I'm struggling to grasp the concept of building validation forms. The bootstrap documentation includes a JS code snippet (referred to as starter code) like the one below:
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
While this code works well, I am now wondering how I could implement password checking, for instance. Bootstrap uses CSS classes :valid and :invalid which trigger when a field is empty. But what if I want them to run based on specific conditions, such as a password being less than 8 characters long?
<form id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword1">Password</label>
<input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
</form>