web-dev-qa-db-ja.com

JavaScript関数からHTML5検証メッセージを手動で表示する方法は？

JavaScript関数を使用して、プログラムでHTML5検証エラーを表示する方法があるかどうかを知りたいです。

これは、電子メールの重複をチェックする必要があるシナリオで役立ちます。たとえば、ユーザーが電子メールを入力し、[送信]ボタンを押した後、この電子メールが既に登録されているなどの通知を受ける必要があるとします。

このようなエラーを表示する方法は他にもありますが、検証エラーメッセージが表示されるのと同じ方法（無効な電子メール、空のフィールドなど）で表示したいと思いました。

JSFiddle：http://jsfiddle.net/ahmadka/tjXG3/

HTMLフォーム：

<form>
    <input type="email" id="email" placeholder="Enter your email here..." required>
    <button type="submit">Submit</button>
</form>

<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>

JavaScript：

function triggerCustomMsg()
{
    document.getElementById("email").setCustomValidity("This email is already used");

}

上記のコードはカスタムメッセージを設定しますが、自動的には表示されません。ユーザーが送信ボタンなどを押したときにのみ表示されます。

javascripthtmlvalidationhtml5-validation
15
Ahmad

HTMLFormElement.reportValidity（）メソッドを使用できるようになりました。現時点では、Internet Explorerを除くほとんどのブラウザーに実装されています（MDNの ブラウザー互換性 を参照）。送信イベントをトリガーせずに有効性エラーを報告し、同じように表示されます。

20
Diego

この質問は1年以上前に尋ねられましたが、私も最近遭遇した良い質問です...

私の解決策は、JavaScriptを使用して、各<label>、<input>、<select>の<textarea>に属性を作成することでした（ "data-invalid"を使用しました）。 validationMessage 。

次に、いくつかのCSS ...

label:after {
    content: attr(data-invalid);
   ...
}

...エラーメッセージを表示します。

制限事項

これは、各要素にラベルがある場合にのみ機能します。 <input>要素は:after疑似要素を持つことができないため、要素自体に属性を配置すると機能しません。

デモ

http://jsfiddle.net/u4ca6kvm/2/

4
Ryan Holdren

@Diegoの指示に従い、form.reportValidity（）;を使用できます。
IEをサポートし、Safariがこのポリフィルを含めると、機能します：

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}
3
Tobias Buschor