setCustomValidity(message)的測試

測試setCustomValidity("XXX")和setCustomValidity("")的不同

by hugogo7646

HTML

<form>
  <input type="text" oninvalid="checkValid(this);" oninput="checkValid(this)" required/>
  <input type="submit" />
</form>
<div>isValid(after setCustomValidity("自訂訊息")):<isValid1></isValid1></div>
<div>isValid(after setCustomValidity("")):<isValid2></isValid2></div>

JavaScript

function checkValid(target) {  
	  //setCustomValidity("XXX")會蓋住input的真正valid狀態
    //但不會改寫真正valid狀態
    target.setCustomValidity("自訂訊息");
    $('isValid1').text(target.validity.valid);
    //setCustomValidity("")可以讓input的真正valid狀態不被蓋住
    target.setCustomValidity("");
    $('isValid2').text(target.validity.valid);
}