自定義HTML5表單驗證最初未顯示自定義錯誤

Question

具有自定義驗證的基本HTML5表單。如果提交的值不是數字，瀏覽器應顯示錯誤消息「字段必須是數字」。如果輸入「abc」並按提交（或按回車鍵），則該字段被標記爲無效，但錯誤消息不會顯示。再次按提交（或按回車），它會顯示消息。這種雙重提交行爲出現在Windows和OS X上的最新版本的Firefox，Chrome，Safari和IE上。您會注意到第一次提交時會顯示默認的「此字段是必需的...」消息，並且不會顯示奇怪的行爲。

http://jsfiddle.net/6gsr3r4b/

順便說一句，我深知這驗證不會在舊版本的IE瀏覽器的工作和輸入字段可以有一個類型的number會自動完成驗證;這是我的問題的簡化例子，僅用於演示目的。

Javscript

var form = document.getElementById("form"); 
var field = document.getElementById("field"); 

form.onsubmit = validateForm; 

function validateForm() { 

    if(isNaN(field.value)) { 
     field.setCustomValidity("Field must be a number."); 
    } else { 
     return true; 
    } 

    return false; 
} 

HTML

<form id="form"> 
    <label for="field">Favorite number</label> 
    <input type="text" id="field" required> 
    <input type="submit"> 
</form> 

Answer 1

的setCustomValidity()功能不用於標記字段爲無效，則用於存儲稍後將顯示如果自定義消息該字段被標記爲無效。在你的代碼中，你需要在驗證處理程序中調用setCustomValidity()函數，直到按下提交按鈕後纔會調用它。這就是爲什麼它第二次顯示，但不是第一次顯示：因爲有效性消息在第一次提交後纔會應用。

您想要做的是在提交表單之前調用setCustomValidity()函數。您可以簡單地在頁面加載時調用它。以下是修改的工作代碼。如果您希望能夠擁有更多的控制權，您還可以從事件處理函數中調用它，以便您可以插入在更新字段內容時被觸發的邏輯。

var form = document.getElementById("form"); 
 
var field = document.getElementById("field"); 
 

 
form.onsubmit = validateForm; 
 

 
/* specify the message that will be displayed if the field is marked invalid */ 
 
field.setCustomValidity("Field must be a number."); 
 

 
/* this is the function that actually marks the field as valid or invalid */ 
 
function validateForm() { 
 

 
    if (!isNaN(field.value)) { 
 
     return true; 
 
    } 
 
    
 
    return false; 
 
}

<form id="form"> 
 
    <label for="field">Favorite number</label> 
 
    <input type="text" id="field" required /> 
 
    <input type="submit" /> 
 
</form>

jsFiddle Version

---

順便說一句，你在做什麼，實際上可以在所有現代瀏覽器實現不使用JavaScript，使用HTML5 pattern attribute。該屬性接受一個正則表達式，瀏覽器使用它來標記該字段的內容爲有效或無效。

這裏是Mozilla開發的網絡有什麼看法pattern屬性：

模式：一個正則表達式的控件的值與檢驗。該模式必須匹配整個值，而不僅僅是一些子集。使用title屬性來描述模式以幫助用戶。此屬性適用於type屬性值爲text，search，tel，url或email的情況;否則會被忽略。正則表達式語言與JavaScript的相同。該圖案未被正斜線包圍。

有利的是，由於CSS僞類，這也提供了關於有效性的實時反饋，而無需提交表單。您甚至可以使用HTML title屬性來設置您的自定義錯誤消息。

下面，您可以看到一個只接受數字而不使用JavaScript的表單示例。如果沒有別的，這是一個很好的方法，可以爲禁用JavaScript的任何人提供穩定的回退，並且它對輔助功能有幫助，因爲腳本或計算機輔助軟件從正則表達式中比從用戶中收集有用信息要容易得多書面驗證功能。

input[type="text"]:invalid { 
 
    background-color: red; 
 
} 
 
input[type="text"]:valid { 
 
    background-color: green; 
 
}

<form id="form"> 
 
    <label for="field">Favorite number</label> 
 
    <input type="text" id="field" pattern="\d*" title="Field must be a number." required /> 
 
    <input type="submit" /> 
 
</form>