Question

我有一个带有两个输入和一个提交按钮的简单表单。我需要根据lang属性显示消息。当我点击提交按钮时，即使该字段填充了有效数据，它也会显示该消息。

<!DOCTYPE html5>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get">
<input type="text" value="" oninvalid="check(event)"   required/>
<input type="text" value="" oninvalid="check(event)" required/>
<input type="submit" value="Save">
</form>

<script type="text/javascript">
function check(e) {

var a=document.documentElement.lang;
var validateMsg=(a=="ar"?"In arabic":"Plz enter on Alphabets");

 var input = e.target;

 if(input.validity.valid){
    return true;
 }else{

     input.setCustomValidity(validateMsg);  
     return false;
 }

}

</script>

</body>
</html>

Answer 1

check(event)毫无意义。事件参数在内部传递
检查oninvalid处理程序内的有效性是无用的

如果仅使用oninvalid，则在用户开始填写字段后，您将无法更改验证消息。您应该使用change，keyup或keydown事件，具体取决于您想要的反应性。

这可行：

<input type="text" value="" onchange="check" required />

// ...

function check(e) {
    var input = e.target;
    var msg = "";
    if(!input.validity.valid) {
        var a=document.documentElement.lang;
        msg=(a=="ar"?"In arabic":"Plz enter on Alphabets");
    }
    input.setCustomValidity(msg);  
}

html5必需属性自定义验证消息不起作用

1 个答案: