必要なフィールドが隠れているときにフォームを傍受する方法は？

Question

私は大きなフォームを持っています。私はブートストラップタブを使ってユーザーにプレゼンテーションしています。さまざまなタブには、required="required"属性を持つ入力フィールドがあります。そこに非現在のタブの空白の必須フィールドがあると私は、フォームが送信されていない送信ボタンをクリックするだけでなく、ブラウザ（クロームV55）は空白の必須フィールドをユーザに警告するために何もしない

<!-- illustrative code only, with all the excess cruft elided --> 
<form onsumbit="return somefunction(this);" method=post action="url"> 
    <fieldset style="display: none;"> 
    <!-- the hidden tab --> 
    <input required name="princess"> 
    </fieldset> 
    <fieldset> 
    <input required name="goomba"> 
    </fieldset> 
    <button type=submit>Save</button> 
</field> 

隠されたタブに。

<form…>要素にonsubmit="return validateForm(this)"ハンドラを置くと、そこに何か感知できることがあると思っていますが、そのハンドラは呼び出されていません。ブラウザは、onsubmitハンドラを呼び出す前に、すべての目に見えない入力を調べて妥当性とチョークを行っているようです。

コンソールに、エラーメッセージ「」が表示されます。「name = 'princess'の無効なフォームコントロールはフォーカスできません。」princessフォームコントロールは別のタブ（<input type=text name=princess required=required>）にあります。このエラーは、onsubmitが実行される前に発生しています。

だから、<form onsubmit=…>を使用してこれに対処するのは適切な戦略ではありません。

ユーザーがフォームを送信しようとしたときにjsを実行し、そのjsが正常に必要な処理を実行できるようにするにはどうすればよいですか？

Answer 1

HTML5でrequiredを使用せず、JSに検証をさせるという原案。インラインを使用していませんonsubmit=...

これは非常に優れたプログラミングスタイルではありません（jQuery &の非jQueryと「タブの切り替え」のハックを組み合わせたものです）。 this answerから参照されるフォーム提出のキャンセル。

Try it on CodePen

あなたはフィールドが満たされているかどうかを確認するために、独自のvalidate()を実装することができるようにするには、日付/値のような有効な値（と、（必要な）、イベントハンドラ内validate(form)関数にform要素を渡すことができますある範囲内で）。

少なくとも、これは「ユーザーがフォームを送信し、そのフォームを正常に実行するといくつかのjを実行します」ということです。 ;）

これは役に立ちます。