カスタム検証前にHTML5の検証が実行されます

ユーザーに入力値を入力するフォームがあります。いくつかの初期入力私はjavascriptを使用してカスタム検証を行っています。フォームの最後に、 "html required attribute"を使用して1つのフィールドが検証されます。しかし、ユーザが送信ボタンをクリックすると、必要な属性を持つ入力ボックスは、エラー表示の順序に従わず、以前のものにチャンスを与える代わりにメッセージを最初に表示する。下に私はコードと画像を追加し、その名前が空であることを示すのではなく、直接場所入力ボックスにジャンプします。これは単にエンドユーザを混乱させます。なぜこの問題が発生し、どのように解決するのですか？カスタム検証前にHTML5の検証が実行されます

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

出典

2017-01-05 WeAreRight

これはただHTML5フォーム検証が原因で、位置入力でrequired属性のトリガーおそらくです。

したがって、名前にrequired属性を設定することもできます。また、novalidate属性でHTML5検証を無効にするか、無効にします。詳細については、こちらを参照してください：https://stackoverflow.com/a/3094185/2008111

更新

だから、簡単な方法は、名前にもrequired属性を追加することです。誰かが何かを入力する前にフォームを提出する場合に備えて。原因HTML5の検証は他のどのアクションよりも先に開始されます。これを回避するもう1つの方法は、どこでもrequired属性を削除することです。そうですね。名前入力がフォーカスを失うとすぐに、javascriptの検証がトリガーされます。onblur

var nameElement = document.forms['something']['name']; 
 

 
nameElement.onblur = function(){ 
 
    var messageElement = document.getElementById('message'); 
 
    var string = nameElement.value.replace(/ /g,""); 
 
\t 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,""); 
 
\t 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>

出典

2017-01-05 06:54:18 caramba

私がしたいですバリデーション時にhtmlフィールドを順序どおりに持つかどうかを理解する。少なくともここではhtmlは入力フィールドをどの順序で与えても気にしないように見えますが、それは必須の属性に直接行きます。それは何らかのバグですか？ – WeAreRight

@ JoneDotosvky名前なしで場所を入力した場合は機能しますか？私はそれがちょうど既定でオンになっているデフォルトHTML5検証だと思う。フォームを送信できないため、jsスクリプトが実行されません。 – caramba

すべて正常に動作しています。名前のJavascript検証も機能します。問題は、名前の代わりに場所の検証が最初に実行されることだけです。 – WeAreRight

カスタム検証前にHTML5の検証が実行されます

答えて

関連する問題