web-dev-qa-db-ja.com

送信時にHTMLの「必須」属性をバイパスする

フォームを送信する前の最初のチェックにrequiredを使用します。

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
  <input type="submit" value="ignore">
</form>

問題は、フォームも送信する「無視」ボタンがあり、バックエンドロジックがDBに正しい状態を設定することです。この場合（無視）、検証は不要です（フィールド "Foo"に入力する必要がないため）。

2つのシナリオを処理する最良の方法は何ですか？

  1. 「必須」をあきらめて、他の場所（バックエンド/ JavaScript）で検証を実行できることを知っています。 「必要」を維持する方法を探しています。
  2. 無視ボタンのシナリオにいくつかのJs onclickを使用して、フォームを送信する直前に属性を削除できます（ https://stackoverflow.com/a/13951500/356726 ）。

しかし、実際にはもっと賢いものを探しています....

---編集---

はい、複製 必須属性HTML5

javascriptjqueryhtmlform-submitrequiredfieldvalidator
26
Horst Walter

JavaScriptは不要で、2番目のフォームは必要ありません。検証は継続できます。

まさにこの使用例のために、HTML5仕様は formnovalidate属性 を送信要素（ <input type=submit> のような）のために-の1つとして設計しました フォーム送信の属性 ：

formnovalidate属性を使用して、制約の検証をトリガーしない送信ボタンを作成できます。

簡単に言えば

<form action="myform.php">
  Foo: <input type="text" name="someField" required>
  <input type="submit" value="submit">
  <input type="submit" value="ignore" formnovalidate>
</form>
69
Bergi

あなたの＃2は一般的なアプローチです。何かのようなもの：

$('input[value="ignore"]').click(function() {
    $(this).siblings('input[type="text"]').removeAttr('required');
});

送信を打つにはマウスダウンを使用する必要があるかもしれません。

4
isherwood

JavaScriptを使用したくない場合は、それらを別々のフォームにして、ignoreフォームのすべての入力を非表示に設定できます。

最良のオプションではありませんが、それは代替手段です。

1
Matt Kenefick

次の理由でアプローチ＃1を使用する必要があります。JavaScript検証の代わりにrequiredを使用する主な理由は、JavaScript検証が単純であり、JavaScriptが無効になっている場合でも機能することです。 requiredを使用すると状況がさらに難しくなるため、ここでは単純さは当てはまりません。また、後者の理由も当てはまりません。JavaScriptが無効で、ブラウザがrequiredをサポートしている場合、テキストフィールドにデータを入力しない限り、[無視]ボタンは機能しません。

別の選択肢は、@ MattKenefickの回答で言及されているものです。これにより、構造とロジックが単純になる場合もあります。フォームが例のように本当に単純である場合、2つのフォームに分割するのは簡単です。

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
</form>
<form action="myform.php">
  <input type="submit" value="ignore">
</form>
1
Jukka K. Korpela