how to change select border color to red on button click-CodePudding

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 >
  <label for="validationRole" >*Role:</label>
  <div >
    <select  id="select-user-role" required>
      <option  selected disabled value="">Select ....</option>
    </select>
    <div style="margin-left: 10px;" >
      Enter a valid user role!
    </div>
  </div>
</div>

<button type="submit" >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

CodePudding user response：

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

CodePudding user response：

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 >
  <label for="validationRole" >*Role:</label>
  <div >
    <select  id="select-user-role" required>
      <option  selected disabled value="">Select ....</option>
    </select>
    <div style="margin-left: 10px;" >
      Enter a valid user role!
    </div>
  </div>
</div>

<button type="submit" >Add</button>