本題に入る前に先にParsley.jsについて触れておくと、

Parsley.js


parsely_js_demo


お手軽に見栄えの良い入力内容のチェックを設置出来るJavaScriptのライブラリで、

<form data-parsley-validate>

上記のようにdata-parsely-validateと、必須にしたい項目にrequiredを付けるだけで設置が完了します。


このライブラリをSOY Shopのマイページ等で使用する場合はひと工夫が必要になります。

話を始める前にマイページ内のフォームのカスタマイズについて下記の記事を一読しておくと良いです。

マイページのコンテンツの出力部分をカスタマイズする - SOY Shopを使ってみよう


最初に普通に設置した場合にどのようになってしまうのか?について触れると、

例えば、

<form soy:id="form">

と記述されている箇所を

<form soy:id="form" data-parsely-validate>

のように変更

した後、ブラウザを介してマイページを開くと

<form action="/ショップID/user/register" method="post">

のようにdata-parsely-validateが消えてしまいます。


これは新たに追加した属性に値がないことが問題であるので、

<form soy:id="form" data-parsely-validate="true">

と仮にtrue(真)の値を付けてあげると、

<form data-parsely-validate="true" action="/ショップID/user/register" method="post">

のように意図した形で出力されるようになります。


各項目に関しても、

<input type="text soy:id="user_name">

があった場合は、

<input type="text soy:id="user_name" required="required">

のようにrequired属性に値を付けると解釈されるようになります。


上記の対応でParsley.jsは無事に動作するようになりました。


関連記事

SOY2HTMLでセキュアなフォームを設置する - HTMLForm編