お問い合わせフォームの必須項目について

Question

WordPressのプラグイン「WM MP Form」でお問い合わせフォームを設置しました。

パソコン版では「姓」「名」と箱が二つあって、スマホ版では「氏名」と箱が一つになる動作をcssで作ったのですが、「姓」と「名」に必須項目を設定すると、スマホ版でdisplay: none;で非表示にした「名」の部分が、「未入力です」となって送信されません。

非表示にした要素から、必須項目を外す方法はあるのでしょうか？

Answer 1

「姓」「名」に入力されていれば、未入力です。という表示は出てこない。となれば

「姓名」に入力した時に、隠れている「姓」「名」にスペースなどの文字を入力するようにJavascriptで組めば良いことになります。

Comments

[Goethe]

inputタグにスペースを入れるのは、JQueryでhtmlを書き換えればいいのでしょうか？

[Jon_do]

https://qiita.com/noqua/items/b81222c0352aecaf31ea

[Goethe]

ありがとうございます！　スペース入れて解決しました！

[Goethe]

すみません！　スペースで回避できる箇所と、できない箇所があります。同じinpuタグでタイプテキストです。全角スペース、半角スペースどちらを試しても、一部回避できません。なぜでしょうか？

[Jon_do]

コードを見れないので何とも言えないです。

[Goethe]

条件に「ひらがな/カタナカ」で記述するルールをつけていたのが原因でした。この場合は、空白で回避はできないですか？

[Jon_do]

なら空白ではなく、ひらがな か カタカナを入れれば良いと思います。

[Goethe]

パソコンでは「姓：山田　名：太郎」と二つの箱がありますが、スマホでは「名」を消して、「姓」を氏名にして「氏名：山田 太郎」と一つの箱になるようにしています。「名」のvalueにひらがなかカタナカを入れると、「山田太郎ア」みたいな感じになると思うのですが、空白のような回避の方法はないでしょうか？

[Jon_do]

バリデーションルールを自作してひらがな カタカナ スペースを許容するようにする。
https://qiita.com/k-gen/items/9c45009495dd20108eba

[Goethe]

ありがとうございます。やってみます。

Answer 2

MW WP Formにそういう機能が備わっているか？の話になりますね。
MW WP Formの改造が必要になるのでは？思います。

Comments

[itagagaki]

具体的には、要素に対してバリデーションチェックを行う直前に、その要素のスタイルが非表示（hidden）ならバリデーションチェックをスルーするというコードを追加することになると思います。
ただ、自分で改造するとMW WP Formのアップデートについていけなくなってしまいますので、そこは考えどころです。

[Goethe]

回答ありがとうございます！
条件分岐でスペースを入れて解決しました。