HTML5：爲什麼我的「oninvalid」屬性讓模式失敗？

這個小HTML5密碼字段完美的作品，而不oninvalid屬性（圖案說：最少6個字符）：HTML5：爲什麼我的「oninvalid」屬性讓模式失敗？

<form> 
    <input type="password" name="user_password_new" pattern=".{6,}" required />  
    <input type="submit" name="register" value="Register" /> 
</form>

見的jsfiddle here。

但是當我添加一個oninvalid屬性，它給出了當用戶輸入不符合模式的自定義錯誤消息，整場永遠不會成爲有效的，看到這裏的代碼：

<form> 
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />  
    <input type="submit" name="register" value="Register" /> 
</form>

見的jsfiddle here 。

你能發現錯誤嗎？

來源

2013-05-31 Sliq

如果您使用setCustomValidity()設置值，則該字段無效。即設置一個非零長度的字符串會導致瀏覽器將該字段視爲無效。爲了讓其他任何驗證的效果，你必須清除定製有效性：

<input type="password" name="user_password_new" pattern=".{6,}" required 
    oninvalid="setCustomValidity('Minimum length is 6 characters')" 
    oninput="setCustomValidity('')" />

來源

2013-06-02 00:54:38 robertc

你的先生，是我的英雄！完美的答案。非常感謝！ – Sliq

一個很好的解釋。解決這個問題的一個簡單方法是去除'oninvalid'屬性，並使用'value'屬性來代替預期的數據格式。這是HTML5 CR推薦的方式。屬性'value =「最小長度爲6個字符」'既可以作爲澄清錯誤信息的工具，也可以作爲鼠標懸停的工具提示。 –

@JukkaK。Korpela：我認爲你的意思是'title'屬性。 –

您可以使用title只要你不介意你的'You must use this format:'消息之前。如果你想要一個完整的自定義消息，setCustomValidity()爲我工作。

來源

2015-05-13 14:49:50 usr4896260

由於我偶然發現了同樣的問題，下面是我的解決方案 - 測試並使用FF，Chrome，IE 10，Edge（2017年2月）。

<form> 
 
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');"> 
 
<input type="email" required> 
 
<input type="submit"> 
 
</form>

說明：

setCustomValidity('');中刪除自定義錯誤字符串，否則將始終導致在驗證過程中無效字段。

checkValidity();做了一個手動驗證 - 就像它發生在表單submisson一樣。結果存儲在validity.valid中。

第二個setCustomValidity(validity.valid ? '' :'please enter 1234');現在根據驗證結果設置錯誤字符串。如果該字段有效，則需要爲空，否則可以設置自定義錯誤字符串。

來源

2017-02-23 17:11:56 musicman

這符合我的需求，它刪除了「你必須使用這種格式：」消息。感謝和+1 – Piet

我喜歡用這樣的：

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

並拔掉所有有效的輸入數據

UPD，爲更好的工作一件事的：

$("input").attr("onblur", "setCustomValidity('')"); 
    $("input").attr("oninput", "setCustomValidity(' ')");

來源

2017-05-18 11:48:25 Anonimys

我認爲這是最簡單的解決方案+1 – DannyFeliz

HTML5：爲什麼我的「oninvalid」屬性讓模式失敗？

回答

相關問題