如果元素可見，則更改按鈕樣式

Question

我想這是一個非常簡單的代碼解決方案來修復，但我還沒有設法讓它發揮作用。 為了給您一些觀點，我目前所做的是使用 intl tel 輸入進行表單格式化，然后我包含了以下代碼（效果很好；）以驗證輸入；

<span id="valid-msg" class="hide">✓Valid number</span>
<span id="error-msg" class="hide"></span>

<style>
.hide {
        display: none;
}
#valid-msg {
    color: #2b9348;
    
    
}
#error-msg {
        color: #C31014;
    
}
<style>
<!--for validation-->
<script>
var input = document.querySelector("#phone"),
    errorMsg = document.querySelector("#error-msg"),
    validMsg = document.querySelector("#valid-msg");


var updateInputValue = function (event) {
       dialCode.value = "+" + iti.getSelectedCountryData().dialCode;
};
input.addEventListener('input', updateInputValue, false);
input.addEventListener('countrychange', updateInputValue, false);

var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

var reset = function() {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

input.addEventListener('blur', function() {
  reset();
  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      var errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});

input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>

如果電話號碼有效，我要做的是更改提交按鈕的樣式，我認為這可以通過檢查#valid-msg 范圍是否可見或沒有 class 來完成。 這是我嘗試過的：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const phoneInput = document.querySelector('#phone');
    const validMsg = document.querySelector('#valid-msg');
    const targetFormButton = document.querySelector('#form-submit');
    if (!phoneInput || !targetFormButton || !validInput) return;

    phoneInput.addEventListener('input', () => {
      const isValid = validMsg.className !== 'hide';
      targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
      targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
    });
  });
</script> ```

If anyone have suggestions they would be greatly appreciated!

Answer 1

如果您的驗證器工作正常，那么您需要的是通過 class 切換的條件格式：

 const btnSubmit = document.querySelector('#form-submit') const phoneInput = document.getElementById('phone') const form = document.getElementById('form') // simplified validation: valid if more // than 3 characters long const validator = (val) => { if (val.length < 3) return false return true } // general function to change classes (add & remove) // on an element (el) const validClassToggle = (addClass, removeClass) => (el) => { el.classList.add(addClass) el.classList.remove(removeClass) } // creating setInvalid & setValid functions const setInvalid = validClassToggle('invalid', 'valid') const setValid = validClassToggle('valid', 'invalid') phoneInput.addEventListener('input', function(e) { validator(e.target.value)? setValid(btnSubmit): setInvalid(btnSubmit) }) form.addEventListener('submit', function(e) { e.stopPropagation() e.preventDefault() if (validator(phoneInput.value)) { console.log("form submitted") } else { console.log("form not submitted") } })

 .valid { background-color: green; color: white; }.invalid { background-color: red; color: white; }

 <form id="form"> <input id="phone" type="text" /><br /> <button id="form-submit" type="submit">SUBMIT</button> </form>