setCustomValidity配合Radio、非Radio、設定pattern的例子

checkValid(target)可以通用有Group(name一樣)的元素及非Group的元素

by hugogo7646

HTML

<form onsubmit="alert('Submit OK!'); return false;">
  <div>
    <input type="radio" name="radioGroup" oninvalid="checkValid(this);" onclick="checkValid(this); setPattern('.{5}');" required/> Pattern:必須5個字(不多不少)
  </div>
  <div>
    <input type="radio" name="radioGroup" oninvalid="checkValid(this);" onclick="checkValid(this); setPattern('.{10}');" required/> Pattern:必須10個字(不多不少)</div>
  <input type="text" id="requiredText" oninvalid="checkValid(this);" oninput="checkValid(this);" required />
  <input type="submit" />
</form>

JavaScript

function checkValid(target) {
  //讓group中(同樣name的)所有input type="radio"的真正valid狀態不要被隱藏
  //如果target沒有name，即不屬於group，那就只設定自己的真正valid狀態不要被隱藏
  var groupTargets = document.getElementsByName(target.name);
  if (groupTargets.length > 0) {
    for (var i = 0; i < groupTargets.length; i++) {
      groupTargets[i].setCustomValidity("");
      if (!groupTargets[i].validity.valid) {
        groupTargets[i].setCustomValidity("自訂訊息");
      }
    }
  } else {
    target.setCustomValidity("");
    //檢查真正的valid狀態
    if (!target.validity.valid) {
      target.setCustomValidity("自訂訊息");
    }
  }

}
//對id="requiredText"設置pattern
function setPattern(pattern) {
  document.getElementById('requiredText').pattern = pattern;
}