HTML5ブラウザの検証 - 1つのフォーム、2つのボタン、検証を変更する必要があります

Question

フォームの最後に「送信」ボタンが1つあり、フォームの途中に2つのボタンがあります。 Javascriptを使用してクリックされたときにフォーム内に隠された入力要素を追加するボタンを追加します。ここで

は、ボタンを追加/ 2の入力フィールドです：

<input name="name" required> 
<input name="email" required type="email"> 
<button type="submit">Add</button> 

そして、入力フィールドの後、別のセット：

<input name="title" required> 
<button type="submit">Submit</button> 

そして、これらはすべて一つの形態の範囲内にあります。

「タイトル」フィールドで「追加」（「タイトル」フィールドではなく）とブラウザの検証をクリックすると、「名前」フィールドと「電子メール」フィールドでHTML5ブラウザの検証が実行されます「名前」と「入力」フィールドではありません）。これを達成する方法はありますか？

Answer 1

最初にフォームを検証するためにHTML5を使用する特別な理由はありますか？私はあなたが必要とするものがJavascriptを使って簡単に達成できると思っています。そしてあなたは、あなたの追加ボタンは、とにかくJavascriptを使っているだろうと指摘しました。また、なぜあなたのフォーム検証がこのような奇妙な方法で分割されるのでしょうか？

私は最初にHTML5検証が嫌いです。たとえば、HTML5の電子メール入力に「asdf @ 1」と入力すると、それを受け入れます。今、あなたはそれが技術的に有効な電子メールアドレスであるという主張をすることができますが、実際にはほとんどの人がそれを有効な電子メールアドレスとして受け入れないことに同意すると思います。ドメインの代わりにIPアドレスを使用することもできますが、現代のWebページにログインするための電子メールとして使用することは非常に疑問です。

しかし、私は逃げます。あなたの質問に答えるために、どのボタンがクリックされたかに基づいてフォーム検証をオーバーライドするJQueryを使って簡単な関数を書くことができます。特定の入力に対するHTML5の検証によってスローされた "無効な"エラーをキャッチし、それを回避するためにfalseを返すことで、これを行います。したがって、送信ボタンをクリックすると、追加ボタンをクリックしたときに名前とメールフォームの検証が上書きされ、その逆も可能です。繰り返しますが、なぜこれをやりたいのか分かりませんが、解決策です。

Answer 2

私が見る唯一の方法は、requiredの属性（または：プロパティ）を動的にオンクリックするように設定することです。

invalidのイベントリスナーを追加したり削除したりすることができます。これは、（「preventDefaultAction」などの）何もしない場合でもネイティブの「欠落」/「間違ったフォーマット」通知を抑制すると思われます。

また、formnovalidate属性のボタンを選択し、選択された要素に手作業でcheckValidity()を送信しましたが、「無効」というイベントが発生してもネイティブダイアログは表示されず、送信はキャンセルされません。 （オペラですべてテスト済み）

Answer 3

あなたは、あなたが完全に正しいいるあなたは

   $('#field_id').attr('required','true'); 
       $('#field_id').removeAttr('required');