如何在單擊按鈕時將選擇邊框顏色更改為紅色

您好，當我決定使用自己的類時，我有一個與驗證和表單相關的有趣問題，但是我意識到單擊按鈕時，邊框顏色不再顯示

我已經嘗試使用 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>

這是我的網站，它何時無效

我想要的是這個驗證訊息和邊框顏色紅色彈出

uj5u.com熱心網友回復：

當用戶無效時，您可以使用 Javascript 將類添加到選擇標記。

嘗試以下

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

我什至添加了洗掉，所以當所選用戶有效時，紅色邊框消失

uj5u.com熱心網友回復：

你還沒有添加一個checkValidity功能，所以我做了一些臨時

的點擊按鈕，如果有效性是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>

標籤：

上一篇：javascriptHTML表格條件資料拉取

下一篇：發布系統中的Javascript問題