parslery_form


Parsley.jsを利用しているサイトで、バリデーションが効かない時があって、requiredの項目に記入をしていなくても、次のページに遷移できてしまうという連絡があり原因を調査することになった。

SOY InquiryでParsley.jsを利用する


問題になっているサイトでは、冒頭のキャプチャのようにラジオボタンがあるフォームで、何も選択をしていない時は意図通りにバリデーションが行われる。

ブラウザのデベロッパーツールを開いて、各項目にフォーカスを当てたりしながら試してみたら、ラジオボタンにチェックを入れた時に、

Uncaught Validator `undefined` only handles multiple values

というエラーが表示された。


どうやらラジオボタンのHTMLに誤りがあるようだ。

ラジオボタンの箇所のHTMLを確認してみると、

<input type="radio" id="col_1" name="col" value="a" required data-parsley-mincheck="1" data-parsley-errors-container="#parsley-error-col">
<label for="col_1">a</label>
<br>
<input type="radio" id="col_2" name="col" value="b">
<label for="col_2">b</label>
<br>
<input type="radio" id="col_3" name="col" value="c">
<label for="col_3">c</label>
<br>
<span id="parsley-error-col"></span>

になっていた。


太字で示したdata-parsley-mincheck属性はチェックボックスでの使用が想定されているらしく、ラジオボタンで用いるとエラーになるらしく、この属性を外してみたら、意図通りの動作になった。