jQuery:バリデーションのテキストが表示されない状態を解決する – validate.js

validation で、チェックボックス(checkbox)とラジオボタン(radio)のバリデーションテキストが表示されない問題を解決します。

01. チェックボックス(checkbox)とラジオボタン(radio)が表示されない

プラグインvalidate.jsを使用してエラー出力をしていたのですが、他のフォーム関係は出力されているのに、どういうわけかチェックボックス(checkbox)とラジオボタン(radio)だけが表示されない状態に。

02. 原因と解決方法

どうやら、装飾用で消していたinput[type=checkbox](input[type=radio])に指定していたCSSinputを消して、擬似要素beforeなどでチェック(ラジオ)ボタンを表現していた)が原因だった模様。

html
<form>
    (〜中略〜)
    <label for="name01" class="label-checkbox">
        <input type="checkbox" name="name01" value="テスト">
        <span>テスト</span>
    </label>
    (〜中略〜)
</form>
CSS
input[type=checkbox] {
    (〜中略〜)
    display: none; // <- 要素を消して見えないようにしていた
    (〜中略〜)
}

ほかのプラグインでも見かける「プラグインあるある」だと思うのですが、display: none;だと要素自体が完全に存在していない状態になるので、opacity: 0;などで、存在している(けれど見えない)状態にしてあげると良いらしいです。

私の場合は、それだけでは要素が0 x 0pxになってしまい、要素が存在しない状態のままだったので、下記のような指定を追加して、要素があくまで存在しているようにすることで解決することができました。

CSS
input[type=checkbox] {
    (〜中略〜)
    opacity:0; /* 要素を透明に */
    height: 1px; /* 高さを出して 0 x 0 を回避 */
    width: 1px;
    -webkit-appearance: none; /* アウトライン消す */
    appearance: none;
    (〜中略〜)
}
jQuery validation - Qiita
はじめに クライアント側のエラーチェックですが、 jquery validationはよく使っているようです。 私も久しぶり再度使ってみました。 ラジオボタンと...
https://qiita.com/chenglin/items/5c9fd7ad0bca070c0af1
URLをコピーする