1

私は2つのボタンを持つフォームを持っています.1つはフォームの最後にある「送信」ボタンで、フォームの中央には「追加」ボタンがあり、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>

そして、これらはすべて 1 つのフォーム内にあります。

「追加」をクリックすると（「タイトル」フィールドではなく）「名前」フィールドと「メール」フィールドで HTML5 ブラウザ検証が起動し、「タイトル」フィールド（「名前」フィールドではなく）でブラウザ検証が起動します。 」および「入力」フィールド) を「送信」をクリックすると表示されます。これを達成する方法はありますか？

4

3 に答える 3

0

そもそも、HTML5 を使用してフォームを検証する特別な理由はありますか? 必要なことは Javascript を使用して簡単に実現できると思いますが、追加ボタンはいずれにせよ JavaScript を使用することに気付きました。また、フォームの検証がこのような奇妙な方法で分割されるのはなぜですか?

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

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

于 2012-04-17T02:03:55.977 に答える
0

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

または、ネイティブの「欠落」/「間違った形式」の通知を抑制しているように見える のイベントリスナーを追加および削除できますinvalid-何もしない場合でも(preventDefaultActionなど)。

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

于 2012-04-16T23:21:30.293 に答える