html5必需屬性自定義驗證消息不起作用

我有一個簡單的窗體，有兩個輸入和一個提交按鈕。我需要根據lang屬性顯示消息。當我點擊提交按鈕時，即使該字段填充了有效數據，它也會顯示該消息。html5必需屬性自定義驗證消息不起作用

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

來源

2014-01-18 dvln

check(event)是無意義的。事件參數爲內部傳遞
檢查oninvalid處理程序中的有效性也沒用

如果你只使用oninvalid，一旦用戶開始填充領域，你將無法改回確認消息。您應該使用change,keyup或事件，具體取決於您想要的反應性。

這可能工作：

<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); 
}

來源

2014-01-19 17:25:07

html5必需屬性自定義驗證消息不起作用

回答

相關問題