Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@jkr_2255

隠れたフォームのバリデーションに失敗

More than 5 years have passed since last update.

とある入力フォームを作った時の話ですが、送信ボタンを押しても一向に送信されず、原因をあれこれ探っていくと、Chromeのエラーコンソールに何やら出力されていました。

An invalid form control with name='foobar' is not focusable.

そして、この問題になったフォームオブジェクトは<div style='display:none'>の中、つまりユーザーからは知覚も操作も不能な場所に置かれていて、そしてHTML5のバリデーション属性がかかっていました。

対策法

もちろん最初からこんなフォームを作ることはないとは思いますが、JavaScriptで制御しているとこのように「見えないコントロールがinvalidとなる」ということは発生してしまいます。対策法を検討してみる過程で、いろいろなものがありました。

novalidate、formnovalidate

まず、novalidateという属性があるのですが、これは<form>全体にしかかけることができません。そして、formnovalidateというのもありましたが、これは送信ボタンにかけて、formのバリデーション制御を上書きするためのものでした。

disabled

フォームをdisabledとしてしまえば、バリデーションを行うこともなくなります。状況によってはそれもありですが、外部システムとの整合性もあるので、簡単には採用できるものではないかもしれません。

バリデーション属性を削除する

ちょうど今回の事例では、一度非表示とした入力フォームを再利用することがなかったので、バリデーション系の属性を引きぬいて対応することにしました。jQueryを使えば比較的簡単にできます。

$('form').find('input textarea select').removeAttr('required max min maxlength pattern');

なお、jQueryのremoveAttr()では、スペース区切りで属性を与えると、一気に削除できます。

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?