我有以下HTML5形式:http://jsfiddle.net/nfgfP/

<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”

目前,当我点击enter时,它们都是空白的,弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?

编辑:还要注意,类型密码字段的错误消息仅仅是*****。为了重新创建这个,给用户名一个值并点击submit。

编辑:我使用Chrome 10进行测试。请也这样做


当前回答

好吧,oninvalid工作得很好,但它显示错误,即使用户输入有效的数据。所以我用下面的方法来解决这个问题,希望它对你也有用,

oninvalid=“this.setCustomValidity('Your Custom message.')” onkeyup=“setCustomValidity('')”

其他回答

我发现的最简单、最干净的方法是使用数据属性来存储自定义错误。测试节点的有效性,并使用一些自定义html处理错误。

le javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

以及一些超级HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

可以通过在字段中添加'title'来轻松处理:

<input type="text" id="username" required title="This field can not be empty"  />
const username= document.querySelector('#username');
const submit=document.querySelector('#submit');

submit.addEventListener('click',()=>{
    if(username.validity.typeMismatch){
        username.setCustomValidity('Please enter User Name');
    }else{
        username.setCustomValidity('');
    }
if(pass.validity.typeMismatch){
        pass.setCustomValidity('Please enter Password');
    }else{
        pass.setCustomValidity('');
    }

})

在HTML5 event oninvalid的帮助下控制自定义消息是非常简单的

下面是代码:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的:

onvalid="this.setCustomValidity('')"

好吧,oninvalid工作得很好,但它显示错误,即使用户输入有效的数据。所以我用下面的方法来解决这个问题,希望它对你也有用,

oninvalid=“this.setCustomValidity('Your Custom message.')” onkeyup=“setCustomValidity('')”