0
318
Visualizaçõeshow to change select border color to red on button click
Hello i have a interesing question related to validation and forms as i decide to use my own class however i realize that when button is click the border color is not displaying anymore
i have try test using css for invalid and it work so now i would want that if the user press the button the style for the select border be red as is invalid how can i do that here my code below
var myForm = document.getElementsByClassName('needs-validation');
var btn = document.querySelector("[type='submit']")
btn.addEventListener("click", function() {
if (myForm.checkValidity()) {
('.select-user-role').setCustomValidity('')
} else {
alert("no");
}
});
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
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);
});
}, false);.select-user-role:invalid {
border-color: red;
}<div class="form-group row">
<label for="validationRole" class="col-form-label role">*Role:</label>
<div class="col-3 ">
<select class="select-user-role custom-select-sm col-11" id="select-user-role" required>
<option class="selectrole" selected disabled value="">Select ....</option>
</select>
<div style="margin-left: 10px;" class="invalid-feedback">
Enter a valid user role!
</div>
</div>
</div>
<button type="submit" class="btn-primary submitbutton">Add</button>This is my website of how it look like when is it in invalid
What i want is this validation message and the border color red pop up
2 Respostas
Responde à pergunta0
You can use Javascript to add a class to the select tag when the user is invalid.
Try the following
var myForm = document.getElementsByClassName('needs-validation');
var btn = document.querySelector("[type='submit']")
var box = document.getElementsByClassName('select-user-role')
btn.addEventListener("click", function() {
if (myForm.checkValidity()) {
box.classList.remove("error");
('.select-user-role').setCustomValidity('')
} else {
box.classList.add("error");
alert("no");
}
});
Then for CSS, add
.select-user-role.error {
border-color: red;
}
I've even added remove, so when the selected user is valid the red border disappears
0
you haven't added a checkValidity function, so I've made something temporary
onclick of the button, if validity is false then you'll give the user-role element the invalid class, if not it'll be removed
var myForm = document.getElementsByClassName('needs-validation');
var btn = document.querySelector("[type='submit']");
var userrole = document.querySelector('.select-user-role');
const checkValidity = () => {
//your code
return false;
}
btn.onclick = () => {
if (checkValidity()) {
userrole.classList.remove('invalid');
} else {
userrole.classList.add('invalid');
}
}.select-user-role.invalid {
border-color: red;
}<div class="form-group row">
<label for="validationRole" class="col-form-label role">*Role:</label>
<div class="col-3 ">
<select class="select-user-role custom-select-sm col-11" id="select-user-role" required>
<option class="selectrole" selected disabled value="">Select ....</option>
</select>
<div style="margin-left: 10px;" class="invalid-feedback">
Enter a valid user role!
</div>
</div>
</div>
<button type="submit" class="btn-primary submitbutton">Add</button>