HTML5驗證在自定義驗證之前執行
[英]HTML5 validation executes before custom validation
問題描述
我有一張表格，要求用戶提供一些輸入值。 對於一些初始輸入，我正在使用javascript進行自定義驗證。 在表單末尾，使用“ html必需屬性”驗證一個字段。 但是，當用戶單擊“提交”按鈕時，具有必需屬性的輸入框將首先顯示消息，而不是給先前的消息提供機會，即不遵循錯誤顯示的順序。 我在下面添加了代碼和圖像，而不是顯示該名稱為空，而是直接跳轉到位置輸入框。 這只會使最終用戶感到困惑。 為什么會出現此問題以及如何解決？
<html> <head> <script> function validate(){ var name = document.forms['something']['name'].value.replace(/ /g,""); if(name.length<6){ document.getElementById('message').innerHTML="Enter correct name"; return false; } } </script> </head> <body> <form name="something" action="somewhere" method="post" onsubmit="return validate()"> <div id="message"></div> Enter Name : <input type="text" name="name" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form> </body> </html>
1 個解決方案
解決方案1
0 2017-01-05 06:54:18
由於位置輸入中的required屬性，這可能只是觸發了HTML5表單驗證。
因此，一種選擇是在名稱上也設置required屬性。 或禁用帶有novalidate屬性的HTML5驗證。 請參閱此處以獲取更多信息： https : //stackoverflow.com/a/3094185/2008111
更新
因此，更簡單的方法是在名稱上也添加required屬性。 以防萬一有人在輸入任何內容之前提交表格。 原因HTML5驗證將首先觸發。 解決此問題的另一種方法是在所有位置刪除required屬性。 像這樣 現在，一旦名稱輸入失去焦點，例如onblur ，就會觸發javascript驗證。
var nameElement = document.forms['something']['name']; nameElement.onblur = function(){ var messageElement = document.getElementById('message'); var string = nameElement.value.replace(/ /g,""); if(string.length<6){ messageElement.innerHTML="Enter correct name"; } else { messageElement.innerHTML=""; } };
<form name="something" action="somewhere" method="post"> <div id="message"></div> Enter Name : <input type="text" name="name" required="required" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form>
現在我猜上面的工作正常。 但是想象一下，您可能需要在多個地方使用該功能，除了要觀察的元素和錯誤消息外，它們是相同的。 當然，可能會有更多類似的地方顯示消息等。這只是讓您了解如何使用相同的功能為更多場景設置：
var nameElement = document.forms['something']['name']; nameElement.onblur = function(){ validate(nameElement, "Enter correct name"); }; function validate(element, errorMessage) { var messageElement = document.getElementById('message'); var string = element.value.replace(/ /g,""); if(string.length < 6){ messageElement.innerHTML= errorMessage; } else { messageElement.innerHTML=""; } }
<form name="something" action="somewhere" method="post"> <div id="message"></div> Enter Name : <input type="text" name="name" required="required" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form>
密碼的HTML5自定義驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.