自定义HTML中无效字段的文本

时间:2013-04-20 02:38:10

标签: javascript html5 css3 javascript-events design-patterns

当输入的文本与模式不匹配时,我正在尝试显示自定义消息。 以下是我使用的代码。

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

请帮我这个代码。

1 个答案:

答案 0 :(得分:0)

尝试在输入标记中使用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')" />