如何在单击按钮时将 select 边框颜色更改为红色

Question

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

Answer 1

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

Answer 2

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>