35

ここにある電子メールのような入力で HTML5 が「必須」であることを確認するブラウザで動作する次のコード例があります。

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>​

これは上記のフィドルです。

ただし、私のアプリケーションでは、フォームの外側でボタンを使用し、そのボタンのクリック イベントに次のコードを追加します。

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

ここで 2 つの質問があります。

  • 次のコードは何をしますか: (!$form.valid || $form.valid())
  • 新しい HTML5 チェックを使用してフォームの有効性を確認するにはどうすればよいですか?
4

2 に答える 2

68

フォーム要素をと呼ばれるオブジェクトに設定したとすると$form、 「、と呼ばれるメソッドがない場合、またはtrueを返す場合」if (!$form.valid || $form.valid())を意味する巧妙な構文になります。通常、それまでにjQuery検証プラグインをインストールして初期化しますが、これにより、検証プラグインがロードされていない場合にフォームが無効になるのを防ぎます。$formvalidvalid()

HTML5メソッドを使用して、次のような同様のテストを実行できますcheckValidity。

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

編集：checkValidityはHTML5フォーム仕様の関数です。2016年2月の時点で、CanIUse.comは、95％以上のブラウザーがそれをサポートしていると報告しています。

于 2012-09-18T05:09:30.697 に答える
1

HTML5 では、要素に「フォーム」属性を使用して、ページ構造のどこに配置されているかに関係なく、フォーム要素に明示的に関連付けることができます: http://developers.whatwg.org/association-of-controls-and -forms.html#attr-fae-フォーム

準拠しているブラウザーでは、input[type=submit][form=id] 要素をどこにでも配置でき、検証と送信プロセスを適切にトリガーできる必要があります。

私は、フォームの「送信」イベント ハンドラーに送信プロセスをインターセプトするコードを配置する傾向があります。これにより、ユーザーが Enter キーを押したり、入力 [type=submit] ボタンを押したりすることでトリガーされます。

于 2012-09-18T05:20:59.537 に答える