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