自定義HTML中無效字段的文本

Question

我試圖在輸入的文本與模式不匹配時顯示自定義消息。 以下是我用過的代碼。

<input pattern="[a-zA-Z0-9]" name="firstName" id="firstname" required="" type="text" /> 

當我輸入像'akshay'這樣的有效文本;它顯示了無效的消息'請匹配請求的格式'

另外，我想將此消息更改爲自定義的消息。我嘗試使用上面給出的代碼，但它不工作。以下是我在下面使用的代碼：

<script> 
document.getElementById("firstname").addEventListener("invalid", function (e) { 
var elem = e.target; 

if (elem.value != "") { 
    e.target.setCustomValidity('Cannot contain special characters'); 
} 
}); 
</script> 

請幫我這個代碼。

Answer 1

嘗試使用oninvalid法在輸入標籤

<input pattern="[a-zA-Z0-9]*" name="firstName" id="firstname" required="required" 
type="text" oninvalid="oninvalid="this.setCustomValidity(this.willValidate?'':'Cannot contain special characters')" />