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

Question

您好，当我决定使用自己的类时，我有一个与验证和表单相关的有趣问题，但是我意识到当单击按钮时，边框颜色不再显示

我已经尝试使用 css 测试无效并且它可以工作，所以现在我希望如果用户按下按钮，选择边框的样式是红色的，因为它是无效的，我该如何在下面的代码中做到这一点

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>

这是我的网站，它何时无效

我想要的是这个验证信息和红色的边框颜色弹出

Answer 1

当用户无效时，您可以使用Javascript在select标签中添加一个类。

试试下面的

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");
  }
});

然后对于 CSS，添加

.select-user-role.error {
  border-color: red;
}

我什至添加了删除，所以当所选用户有效时，红色边框消失

Answer 2

你还没有添加 checkValidity 函数，所以我做了一些临时的

onclick 按钮，如果有效性为 false，那么您将为 user-role 元素提供 invalid 类，否则将被删除

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>