2011-12-21 2 views
24

<input type="text">のような入力があり、入力時にネイティブエラーを発生させたい場合、それを行うことはできますか?JavaScriptでカスタムHTML5フォームエラーをトリガできますか?

error http://tylergaw.com/storage/post_image_htmlFormErrors_defaultChrome.jpg

しかし、カスタムメッセージと、それ自身の検証機能について:(フェイクコード)ele.triggerError('Error Message');

のようにその後のようになります。たとえば、AJAX検証に必要です。

+0

JQueryで作業することができますか?JQueryの検証ではそれが実現します –

+0

ネイティブエラーをトリガーしたいです。カスタムエラーは問題ありませんが、ブラウザに合わせてHTML5を使用したいと考えています。 –

+0

HTML5の機能にもよりますが、ブラウザ間で不一致があり、サポートが多少制限されています。 HTML5は標準ではなく(また決して存在することもありません)、それが「生活仕様」であるため、標準ではありません。これは、標準(つまり[W3C標準](http://www.w3.org/standards/))、従来の動作([DOM 0](http://www.w3.org/TR/2000/))の組み合わせです。 WD-DOM-Level-1-20000929/glossary.html#dt-DOM-Level-0))、現在の動作と提案されている将来の機能を示していますが、したがって、HTML5を使用するものは、基本的なブラウザの動作にフォールバックを使用して機能の検出を使用する必要があります。 – RobG

答えて

26

ネイティブエラーを引き起こす唯一の方法は、フォームを送信することです。 setCustomValidityas described in my answer here)でカスタムメッセージを設定し、checkValidityinvalidイベントをトリガーすることはできますが、独自の検証UIを作成するためのフックのみが提供されます。 Here's a simple exampleと一緒に遊ぶことができます。

妥当性検査APIをバイパスするsubmit()メソッドを使用してフォームを送信する場合は注意してください。しかし、trigger the click event of the submitボタンはFirefoxとOperaでは動作しますが、Chromeでは動作しません。私は今それをやることを避けるだろう。

+0

うわー、私はあなたが持っているエラーメッセージを修正しました。FFまたはChromeには表示されません。私は "blanksssss"をやっただけで、まだ空白を示しています。 –

+0

Nevermind ... Uugh、JSFiddle。 JSFiddleはJSBinのように自動更新されません。私はこれが働いていると思う...それ以上の悪い遊び!ありがとうございました –

+0

@OscarGodson ['ValidityState'オブジェクト](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms)を確認できます。 html#validitystate)*なぜ*フィールドは無効です。 – robertc

1

ChromeForm、Firefox、Opera、Androidブラウザでは実装されていても、Internet ExplorerやSafariではサポートされていないHTMLFormElement.reportValidity()メソッドを使用できるようになりました(サポートされているブラウザはcaniuse.com)。

関連する問題