スパイラル

【スパライル】ラジオボタンをカスタマイズしたらrequiredのエラーメッセージが表示されない

スパイラルでフォームを作成しています。

性別の項目はラジオボタンにしていますが、図の上の性別のようにボタンで表現したいと思っています。

 

ところが、スタイルシートで体裁を整えると、requiredのエラーメッセ―ジが表示されないという現象になってしまいました。

図はEdgeでのValidationエラー画面です。Edgeでは全てのエラーが一度にマークされるんですね。

GoogleChromeでは上の項目から1つずつエラーが表示されます。

 

ラジオボタンのカスタマイズ(元)

元のCSSは以下の通りです。

ラジオボタンは非表示にしてチェックされた時とマウスホバーした時にそれぞれスタイルを適用するようにしています。

 

どうしてRequiredが効かないのか?

答えは超シンプルでした!

非表示の<input>要素ではフォームバリデーションが実行されない

↑これだけ!

そうかぁ。。。

非表示にしたらダメなんですね…。

 

ラジオボタンを非表示にせずに非表示風にする方法

ラジオボタンを完全に非表示にするとNGなので、非表示ではなく透明化で対応します。

変更後のCSSです。

htmlソース

上のラジオボタンのみClassを適用してラジオボタンを透明化しました。

カスタマイズの結果

EdgeではRequiredは有効になっているものの、赤枠表示はできなかったようです。

GoogleChromeでは、想定の動きをしてくれたのでこれでOKとしました。

最近、スパイラルで作ったフォームをカスタマイズするのが楽しくなってきました!

慣れると非Webエンジニアでもフォームを作れるのでおすすめです。

ABOUT ME
アズビーパートナーズ
アズビーパートナーズ
プログラマーと社内SEとしての経験を活かして、 情報システム部門のご相談を承ります。 得意な分野はAccessによる短納期開発、 BIツール(QlikSense/QlikView)の開発です。 現在はCMSを利用したホームページの作成にも力を入れています。
アマゾン法人会員を上手に活用しましょう!

アマゾンの法人会員、「Amazonビジネス」活用してますか?

事務用品からノベルティ、インセンティブなど通販を活用すると非常に便利ですよね。

Amazonビジネスなら、請求書払い・見積書発行など法人に特化したサービスが受けられます。

\Amazonビジネスをもっと活用しよう/

Amazon法人会員のメリットをチェック!