web-dev-qa-db-ja.com

送信ボタンを含まないHTML5フォームの有効性を確認するにはどうすればよいですか？

ここに記載されている電子メールのような入力でHTML5が「必須」と表示されたときに確認するブラウザで動作する次のコード例があります。

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

上記は fiddle です。

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

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チェックを使用してフォームの有効性を確認するにはどうすればよいですか？
javascriptjqueryhtml5validation
26
user1464139

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

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

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

[〜＃〜] edit [〜＃〜]：checkValidityは HTML5フォーム仕様の関数 です。 2016年2月現在、CanIUse.comは ブラウザの95％以上がサポートしています と報告しています。

53
Jeff Bowman

HTML5では、要素の "form"属性を使用して、ページ構造内の位置に関係なく、要素をForm要素に明示的に関連付けることができます。 http://developers.whatwg.org/association-of -controls-and-forms.html＃attr-fae-form

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

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

1
jokeyrhyme