HTML5クライアント側の検証エラーのバブルをプログラムで表示する方法

Question

フォーム/サブミットコンテキストの外部でHTML5クライアント側の検証を使用しようとしていますが、検証エラーのバブルを表示する方法がわかりません。次のことを考えてみましょう：

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')"> 
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button> 

すべてが期待通りcheckValidityから返される正しい値で、動作し、無効なイベントが送信され、表示されているが、どのように私はプログラム的に検証エラーのバブルが表示されていますか？

Answer 1

あなたがこのバブルの話をしている場合：

この回答への参照ScottRさんのコメントの代わりに。

...そして私のテストは、FirefoxとChromeの両方がないスタンドアロンの要素（ testcase）に > <フォーム（ testcase）に包まれた要素に checkValidity を呼び出したときにそれを表示するが、ことを示しています。

フォームがない場合は表示する仕組みがないようで、という仕様は、プログラムのcheckValidity呼び出し（要素またはフォーム上）に応答して表示する必要があります。形。

実際には送信しない場合でも、要素をフォームにラップしてください。

さらに、独自の検証UIを使用すると、この未指定領域のブラウザの将来の変更を防ぐことができます。

Answer 2

本当に必要な場合を除き、required="required"を使用してoninvalidハンドラーを削除してみてください。

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

この作業の例：https://support.mozilla.com/en-US/users/register

Answer 3

誤ったフィールドに手動で「無効」属性を手動で設定します。 小規模の例：

var form = $('#myForm').get(0); 
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) { 
    $('input:required').each(function(cnt, item) { 
     if(!$(item).val()) { 
      $(item).attr('invalid', 'invalid'); 
     } 
    }); 
    return false; 
}