I have a form with multiple sections. Each section is validated manually using Bootstrap 4 validation (without submitting the form for real). This works fine with the code below;
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
However, I only want to highlight the inputs that are invalid. I.e, don't highlight valid inputs in green. Rather than overwrite the bootstrap styles for this, I figured I would try and remove the :valid pseudo class from the valid inputs. However, I can't find any examples of anybody doing this. The questions I've looked through on SO just change the styles via CSS.
I thought something like this might work,
eventCreationForm.find(":valid").removeClass(":valid"); but I suppose it doesn't as it's not a real class.
The example below has a callstack error, but that's just this example.
$(document).ready(function(){
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
$(".manual-submit").click(function(){
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
})
})<script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=".3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href=".3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<form class="needs-validation event-creation-form" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<button class="btn btn-primary manual-submit">Submit form</button>
</form>I have a form with multiple sections. Each section is validated manually using Bootstrap 4 validation (without submitting the form for real). This works fine with the code below;
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
However, I only want to highlight the inputs that are invalid. I.e, don't highlight valid inputs in green. Rather than overwrite the bootstrap styles for this, I figured I would try and remove the :valid pseudo class from the valid inputs. However, I can't find any examples of anybody doing this. The questions I've looked through on SO just change the styles via CSS.
I thought something like this might work,
eventCreationForm.find(":valid").removeClass(":valid"); but I suppose it doesn't as it's not a real class.
The example below has a callstack error, but that's just this example.
$(document).ready(function(){
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
$(".manual-submit").click(function(){
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
})
})<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<form class="needs-validation event-creation-form" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<button class="btn btn-primary manual-submit">Submit form</button>
</form>2 Answers
Reset to default 6You cannot get rid of the :valid pseudo-class at all as far as I know.
However, the problem here isn't those pseudo-classes. Bootstrap 4 will behave as asked in the question when the was-validated class is NOT added to the form, as long as you manually add the is-invalid class where appropriate.
As per the Bootstrap 4 documentation:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
(Emphasis mine.)
The reason you're seeing the :valid and :invalid pseudo-classes styled is because of the was-validated class on the parent:
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
You can actually toggle the :valid and :invalid pseudo-classes indirectly with setCustomValidity() in JavaScript.
From the Bootstrap 4 documentation (also works in Bootstrap 5):
You may provide custom validity messages with setCustomValidity in JavaScript.
To add :invalid and remove :valid, use:
var error = "An invalid input message.";
this.setCustomValidity(error);
To add :valid and remove :invalid, use:
this.setCustomValidity("");
You can also add, remove, or change the error message by manipulating the text in the appropriate element.