html5 の必須入力を使用する際に発生する問題と解決策

フォーム送信時に入力を非表示にする際のエラー

フォームが送信されると、一部の入力タグが非表示になり、フォーム検証プロセス中にAn invalid form control with name='' is not focusableエラーが表示されます。

私が遭遇した問題は、入力タグに必須属性がまったくないことですが、タグが非表示になる前に（タブバーを使用して切り替えました）、間違った形式を入力してから非表示にしましたが、この時点では実際には間違っていました。フォームでも検証されますが、非表示になっているため、フォーカスを取得できない場合、ブラウザーはエラーを報告します。

入力を非表示にする前に、入力の値を空に設定してください。入力では必須の属性が使用されていません。

このエラーは、入力に display:none および required 属性が含まれている場合にも発生します。

Chrome は、「このフィールドに入力してください」というメッセージをポップアップ表示できるように、必要であるがまだ空であるコントロールに焦点を当てたいと考えています。ただし、Chrome がメッセージをポップアップ表示したいとき、つまりフォームが送信されるときにコントロールが非表示になっている場合、Chrome はコントロールが非表示であるためコントロールにフォーカスできず、フォームは送信されません。

1.非表示にする場合は必要な属性を削除します

selector.removeAttribute(必須)

2. required が使用されない場合は、ボタンの種類が設定されていないことが原因である可能性があります。 <button type=button>を設定します

3. フォームは検証されません。つまり、novalidate 属性が追加されます。 (最終的な解決策ではありません）<form novalidate></form>

4. display:none を使用することによって発生する問題であるため、同じ Visibility:hidden も問題を引き起こすため、使用しないでください。 CSS スタイルの不透明度を設定できます: 0;

5. このフォーム コントロールを無効にします。これは、通常、フォーム コントロールを非表示にするのは、その値を気にしないためです。したがって、このフォーム コントロールの名前と値のペアは、フォームが送信されるときに送信されません。

 $(body).on(submit, .myForm, function(evt) {// 検証したくないものを無効にします。$([input:hidden, textarea:hidden, select:hidden]).attr(disabled) , true);// HTML5 検証が利用可能な場合は実行します。そうでない場合は、default.if (this.el.checkValidity && !this.el.checkValidity()) { //以前に無効にしたものを再度有効にします。 $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); return true;}evt.preventDefault();// を再度有効にします。以前は無効にしました。$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// 他のフォーム処理要素がここに置かれます。});

上記は、編集者が紹介した h5 の必須入力の使用時に発生する問題と解決策です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！