HTML5フォームの検証 - エラーメッセージのカスタマイズ

Question

私はこのような入力を持つフォームを持っています。

<input type="text" name="question" class="form-control" required="" minlength="4" maxlength="2" size="20" oninvalid="setCustomValidity('please enter something')">

今デフォルトの検証メッセージは素晴らしい仕事。しかし、私は特定のルールのためのカスタムメッセージを設定したい。

つまり、それぞれが失敗すると、失敗したルールに固有のカスタムエラーメッセージを提供したい場合は、requiredminlengthmaxlengthのようなルールです。

私はoninvalid="setCustomValidity('please enter something')"を試しましたが、それはすべてのルールに対してそのメッセージを設定します。

特定のルールにカスタムエラーメッセージを指定する方法を教えてください。

Answer 1

使用setCustomValidityプロパティ検証メッセージを変更するにはvalidityプロパティを確認してください。

validity：要素の妥当性状態を記述するValidityStateオブジェクト。あなたが可能な値を見つけることができますHereフォームのロード時に

validateプロパティは、各フォーム要素のための初期化によるキー入力などのユーザーイベントにすべての検証に更新さなどを変更

var email = document.getElementById("mail"); 

if (email.validity.valueMissing) { 
    email.setCustomValidity("Don't be shy !"); 
} 
else{ 
    event.target.setCustomValidity(""); 
} 

email.addEventListener("input", function (event) { 

    if (email.validity.valueMissing) { 
    event.target.setCustomValidity("Don't be shy !"); 
    } 
    else{ 
    event.target.setCustomValidity(""); 
    } 
}); 

デモhttps://jsfiddle.net/91kc2c9a/2/

注：いくつかの未知の理由により、電子メールの検証は上記のフィドルでは機能しませんが、ローカルで正常に動作するはずです

ValidityStateの詳細here

Answer 2

oninvalidイベントが発生します。入力が無効な場合、入力が必要な場合は入力が必要です。空の場合は、oninvalidが発生します。

（thisを参照）そして、はい、maxlengthはあなたのコードは、この（ID「入力フィールド」を持つ）のようなものである場合は、単にrequired を書くことができますminlengthよりも大きくし、代わりにrequired=""である必要があります：

<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">

異なる検証を確認し、それらに基づいて異なるエラーを表示するカスタム関数を追加する必要があります。入力ボックスは、その要件のために集中し、チェックを失ったとき

はvalidator()機能怒鳴るはトリガ、valdiator_two()は、入力フィールド内のすべてのキー操作でトリガされます。

var field = document.getElementById("input-field"); 
 
function validator(){ 
 
    if (field.value === "") { 
 
     alert("You can't leave this empty"); 
 
    } 
 
    if (field.value !== "" && field.value.length < 4){ 
 
     alert("You have to enter at least 4 character"); 
 
    } 
 
} 
 

 
function validator_two(){ 
 
    if (field.value.length >= 8){ 
 
     alert("You can't enter more than 8 character"); 
 
    } 
 
} 
 

 
field.addEventListener("blur", validator); 
 
field.addEventListener("input", validator_two);

<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">