EC-CUBEにJavascriptの入力チェック(jQuery-Validation-Engine)を実装するサンプル

#jQuery-Validation-Engineとは？
入力フィールドからフォーカスを外すと吹き出しでチェックがでる機能。
↓こんなの
![de6381acc4284379eff27eddb8032674.png](https://qiita-image-store.s3.amazonaws.com/0/75602/258fa8ea-b979-bf3d-d9cf-6b6156ba1ca4.png)
[詳細はコチラ](http://qiita.com/seihowlow24/items/06d399cba07e6b74cfaf)。

EC-CUBEにはデフォルトで入力チェック機能があるがsubmitしないと動かないのでsubmit前にチェックを実装したいときにはオススメ。実装してみたところ思ったよりはラク。

#ダウンロード
[ここから](https://github.com/posabsolute/jQuery-Validation-Engine)

#実装方法
※修正するソースはEC-CUBE2.13.3のデフォルト状態とします。
※アップロード先は「EC-CUBEのdataフォルダとhtmlフォルダが見えるところ（=documentroot）」。


##１．zipを解凍
解凍してください。

##２．アップロード
解凍したフォルダにある

css/validationEngine.jquery.cssを
/html/user_data/packages/default/cssへアップロード。

js/jquery.validationEngine.jsを
/html/jsへアップロード。

js/languages/をフォルダごと
/html/jsへアップロード。

こんなふうになります
/html/user_data/packages/default/css/css/validationEngine.jquery.css
/html/js/jquery.validationEngine.js
/html/js/languages/

##３．ソースの修正（準備）
・*/html/user_data/packages/default/css/import.css*
↓こうなっているので
<pre>
@charset "utf-8";

/************************************************
 import css
************************************************ */
@import url("./reset.css");
@import url("./common.css");
@import url("./contents.css");
@import url("./table.css");
@import url("./bloc.css");
@import url("./bloc_alpha.css");
@import url("./popup.css");

@import url("./print.css");
</pre>↓こうする
<pre>
@charset "utf-8";

/************************************************
 import css
************************************************ */
@import url("./reset.css");
@import url("./common.css");
@import url("./contents.css");
@import url("./table.css");
@import url("./bloc.css");
@import url("./bloc_alpha.css");
@import url("./popup.css");

@import url("./print.css");
@import url("./validationEngine.jquery.css");   
</pre>

・*/data/Smarty/templates/default/site_frame.tpl*
61行目が↓こうなっているので
<pre>
```
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.colorbox/jquery.colorbox-min.js"></script>
```
</pre>↓こうする
<pre>
```
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.colorbox/jquery.colorbox-min.js"></script>
<!-- 追加ここから -->
<link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}-->user_data/packages/default/css/validationEngine.jquery.css" type="text/css" media="all" />
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/languages/jquery.validationEngine-ja.js"></script>
<script>
jQuery(document).ready(function(){
    // binds form submission and fields to the validation engine
    jQuery("#form1").validationEngine();
});
</script>
<!-- 追加ここまで -->
```
</pre>

##４．ソースの修正（実装）
・*/data/Smarty/templates/default/frontparts/form_personal_input.tpl*
・*/data/Smarty/templates/default/shopping/nonmember_input.tpl*

※修正箇所が多いので修正方法のみ。

<dl>
  <dt>textの必須入力の場合</dt>
  <dd>validate[required]</dd>
  <dd>実装箇所：姓、名などのtype="text"の箇所</dd>
  <dd>修正例：class="box120" →　class="validate[required] box120"</dd>
  <dt>select,radioの必須入力の場合</dt>
  <dd>class="validate[required]"</dd>
  <dd>実装箇所：都道府県、性別などのselect,radioの箇所</dd>
  <dd>修正例：&lt;select&gt; →　&lt;select class="validate[required]"&gt;</dd>
  <dt>必須入力かつ数値のみ</dt>
  <dd>validate[required,custom[onlyNumberSp]]</dd>
  <dd>実装箇所：電話番号などのtype="text"の箇所</dd>
  <dd>修正例：class="box60" →　class="validate[required,custom[onlyNumberSp]] 
  <dt>必須かつemail形式のチェック</dt>
  <dd>validate[required,custom[email]]</dd>
  <dd>実装箇所：emailなど</dd>
  <dd>修正例：class="box300 top" →　class="validate[required,custom[email]] box300 top"</dd>
  <dt>必須かつ半角英数形式のチェック</dt>
  <dd>validate[required,custom[onlyLetterNumber]]</dd>
  <dd>実装箇所：passwordなど</dd>
  <dd>修正例：class="box300 top" →　class="validate[required,custom[email]] box300 top"</dd>
  <dt>確認入力（同じものを２回入力させるもの）</dt>
  <dd>validate[equals[xxxx]]</dd>
  <dd>修正例（E-Mailの場合）：<br>１．最初に入力するほうにid="email"を入れる。<br>２．２回目に入力するほうを以下の用に修正。</dd>
  <dd>実装箇所：email,passwordなど</dd>
  <dd>修正例：class="box300" →　class="validate[equals[email]] box300"</dd>
  <dt>数値チェック（必須ではない）</dt>
  <dd>validate[custom[onlyNumberSp]]</dd>
  <dd>実装箇所：FAXなどのtype="text"の箇所</dd>
  <dd>修正例：class="box60" →　class="validate[custom[onlyNumberSp]] box60"</dd>

</dl>


##４．１．修正後ソースサンプル
・*/data/Smarty/templates/default/frontparts/form_personal_input.tpl*

こんなふうになります。
<pre>
&lt;!--{*
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2014 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */
*}--&gt;

&lt;!--{strip}--&gt;
    &lt;col width="30%" /&gt;
    &lt;col width="70%" /&gt;
    &lt;tr&gt;
        &lt;th&gt;お名前&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{assign var=key1 value="`$prefix`name01"}--&gt;
            &lt;!--{assign var=key2 value="`$prefix`name02"}--&gt;
            &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            姓&nbsp;&lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: active;" class="validate[required] box120" /&gt;&nbsp;
            名&nbsp;&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key2].length}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: active;" class="validate[required] box120" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;お名前(フリガナ)&lt;!--{if !$smarty.const.FORM_COUNTRY_ENABLE}--&gt;&lt;span class="attention"&gt;※&lt;/span&gt;&lt;!--{/if}--&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{assign var=key1 value="`$prefix`kana01"}--&gt;
            &lt;!--{assign var=key2 value="`$prefix`kana02"}--&gt;
            &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            セイ&nbsp;&lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: active;" class="validate[required] box120" /&gt;&nbsp;
            メイ&nbsp;&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: active;" class="validate[required] box120" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;会社名&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{assign var=key1 value="`$prefix`company_name"}--&gt;
            &lt;!--{if $arrErr[$key1]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: active;" class="box300" /&gt;&nbsp;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;!--{assign var=key1 value="`$prefix`zip01"}--&gt;
    &lt;!--{assign var=key2 value="`$prefix`zip02"}--&gt;
    &lt;!--{assign var=key3 value="`$prefix`pref"}--&gt;
    &lt;!--{assign var=key4 value="`$prefix`addr01"}--&gt;
    &lt;!--{assign var=key5 value="`$prefix`addr02"}--&gt;
    &lt;!--{assign var=key6 value="`$prefix`country_id"}--&gt;
    &lt;!--{assign var=key7 value="`$prefix`zipcode"}--&gt;
    &lt;!--{if !$smarty.const.FORM_COUNTRY_ENABLE}--&gt;
    &lt;input type="hidden" name="&lt;!--{$key6}--&gt;" value="&lt;!--{$smarty.const.DEFAULT_COUNTRY_ID}--&gt;" /&gt;
    &lt;!--{else}--&gt;
    &lt;tr&gt;
        &lt;th&gt;国&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{if $arrErr[$key6]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key6]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;select name="&lt;!--{$key6}--&gt;" style="&lt;!--{$arrErr[$key6]|sfGetErrorColor}--&gt;"&gt;
                    &lt;option value="" selected="selected"&gt;国を選択&lt;/option&gt;
                    &lt;!--{html_options options=$arrCountry selected=$arrForm[$key6].value|h|default:$smarty.const.DEFAULT_COUNTRY_ID}--&gt;
            &lt;/select&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;ZIP CODE&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{if $arrErr[$key7]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key7]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;input type="text" name="&lt;!--{$key7}--&gt;" value="&lt;!--{$arrForm[$key7].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key7].length}--&gt;" class="box120" style="&lt;!--{$arrErr[$key7]|sfGetErrorColor}--&gt;; ime-mode: disabled;" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;!--{/if}--&gt;
    &lt;tr&gt;
        &lt;th&gt;郵便番号&lt;!--{if !$smarty.const.FORM_COUNTRY_ENABLE}--&gt;&lt;span class="attention"&gt;※&lt;/span&gt;&lt;!--{/if}--&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;p class="top"&gt;〒&nbsp;&lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /&gt;&nbsp;-&nbsp;&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key2].length}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /&gt;&nbsp;
            &lt;a href="http://search.post.japanpost.jp/zipcode/" target="_blank"&gt;&lt;span class="mini"&gt;郵便番号検索&lt;/span&gt;&lt;/a&gt;
            &lt;/p&gt;
            &lt;p class="zipimg"&gt;
                &lt;a href="&lt;!--{$smarty.const.ROOT_URLPATH}--&gt;input_zip.php" onclick="eccube.getAddress('&lt;!--{$smarty.const.INPUT_ZIP_URLPATH}--&gt;', '&lt;!--{$key1}--&gt;', '&lt;!--{$key2}--&gt;', '&lt;!--{$key3}--&gt;', '&lt;!--{$key4}--&gt;'); return false;" target="_blank"&gt;
                    &lt;img src="&lt;!--{$TPL_URLPATH}--&gt;img/button/btn_address_input.jpg" alt="住所自動入力" /&gt;&lt;/a&gt;
                &nbsp;&lt;span class="mini"&gt;郵便番号を入力後、クリックしてください。&lt;/span&gt;
            &lt;/p&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;住所&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{if $arrErr[$key3] || $arrErr[$key4] || $arrErr[$key5]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key3]}--&gt;&lt;!--{$arrErr[$key4]}--&gt;&lt;!--{$arrErr[$key5]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;select name="&lt;!--{$key3}--&gt;" style="&lt;!--{$arrErr[$key3]|sfGetErrorColor}--&gt;" class="validate[required]"&gt;
                    &lt;option value="" selected="selected"&gt;都道府県を選択&lt;/option&gt;
                    &lt;!--{html_options options=$arrPref selected=$arrForm[$key3].value|h}--&gt;
            &lt;/select&gt;
            &lt;p class="top"&gt;&lt;input type="text" name="&lt;!--{$key4}--&gt;" value="&lt;!--{$arrForm[$key4].value|h}--&gt;" class="validate[required] box300" style="&lt;!--{$arrErr[$key4]|sfGetErrorColor}--&gt;; ime-mode: active;" /&gt;&lt;br /&gt;
                &lt;!--{$smarty.const.SAMPLE_ADDRESS1}--&gt;&lt;/p&gt;
            &lt;p class="top"&gt;&lt;input type="text" name="&lt;!--{$key5}--&gt;" value="&lt;!--{$arrForm[$key5].value|h}--&gt;" class="validate[required] box300" style="&lt;!--{$arrErr[$key5]|sfGetErrorColor}--&gt;; ime-mode: active;" /&gt;&lt;br /&gt;
                &lt;!--{$smarty.const.SAMPLE_ADDRESS2}--&gt;&lt;/p&gt;
            &lt;p class="mini"&gt;&lt;span class="attention"&gt;住所は2つに分けてご記入ください。マンション名は必ず記入してください。&lt;/span&gt;&lt;/p&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;電話番号&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{assign var=key1 value="`$prefix`tel01"}--&gt;
            &lt;!--{assign var=key2 value="`$prefix`tel02"}--&gt;
            &lt;!--{assign var=key3 value="`$prefix`tel03"}--&gt;
            &lt;!--{if $arrErr[$key1] || $arrErr[$key2] || $arrErr[$key3]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;!--{$arrErr[$key3]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /&gt;&nbsp;-&nbsp;&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key2].length}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /&gt;&nbsp;-&nbsp;&lt;input type="text" name="&lt;!--{$key3}--&gt;" value="&lt;!--{$arrForm[$key3].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key3].length}--&gt;" style="&lt;!--{$arrErr[$key3]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;FAX&lt;/th&gt;
        &lt;td&gt;
            &lt;!--{assign var=key1 value="`$prefix`fax01"}--&gt;
            &lt;!--{assign var=key2 value="`$prefix`fax02"}--&gt;
            &lt;!--{assign var=key3 value="`$prefix`fax03"}--&gt;
            &lt;!--{if $arrErr[$key1] || $arrErr[$key2] || $arrErr[$key3]}--&gt;
                &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;!--{$arrErr[$key3]}--&gt;&lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" /&gt;&nbsp;-&nbsp;&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key2].length}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" /&gt;&nbsp;-&nbsp;&lt;input type="text" name="&lt;!--{$key3}--&gt;" value="&lt;!--{$arrForm[$key3].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key3].length}--&gt;" style="&lt;!--{$arrErr[$key3]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;!--{if $flgFields &gt; 1}--&gt;
        &lt;tr&gt;
            &lt;th&gt;メールアドレス&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
            &lt;td&gt;
                &lt;!--{assign var=key1 value="`$prefix`email"}--&gt;
                &lt;!--{assign var=key2 value="`$prefix`email02"}--&gt;
                &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                    &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
                &lt;!--{/if}--&gt;
                &lt;input type="text" id="email" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[required,custom[email]] box300 top" /&gt;&lt;br /&gt;
                &lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" style="&lt;!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: disabled;" class="validate[equals[email]] box300" /&gt;&lt;br /&gt;
                &lt;span class="attention mini"&gt;確認のため2度入力してください。&lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!--{if $emailMobile}--&gt;
            &lt;tr&gt;
                &lt;th&gt;携帯メールアドレス&lt;/th&gt;
                &lt;td&gt;
                    &lt;!--{assign var=key1 value="`$prefix`email_mobile"}--&gt;
                    &lt;!--{assign var=key2 value="`$prefix`email_mobile02"}--&gt;
                    &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                    &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
                    &lt;!--{/if}--&gt;
                    &lt;input type="text" name="&lt;!--{$key1}--&gt;" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;; ime-mode: disabled;" maxlength="&lt;!--{$smarty.const.MTEXT_LEN}--&gt;" class="box300 top" /&gt;&lt;br /&gt;
                    &lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" style="&lt;!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: disabled;" maxlength="&lt;!--{$smarty.const.MTEXT_LEN}--&gt;" class="box300" /&gt;&lt;br /&gt;
                    &lt;span class="attention mini"&gt;確認のため2度入力してください。&lt;/span&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;!--{/if}--&gt;
        &lt;tr&gt;
            &lt;th&gt;性別&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
            &lt;td&gt;
                &lt;!--{assign var=key1 value="`$prefix`sex"}--&gt;
                &lt;!--{if $arrErr[$key1]}--&gt;
                    &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;/div&gt;
                &lt;!--{/if}--&gt;
                &lt;span style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;"&gt;
                    &lt;!--{html_radios name=$key1 options=$arrSex selected=$arrForm[$key1].value separator='&lt;br /&gt;'}--&gt;
                &lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th&gt;職業&lt;/th&gt;
            &lt;td&gt;
                &lt;!--{assign var=key1 value="`$prefix`job"}--&gt;
                &lt;!--{if $arrErr[$key1]}--&gt;
                    &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;/div&gt;
                &lt;!--{/if}--&gt;
                &lt;select name="&lt;!--{$key1}--&gt;"&gt;
                    &lt;option value="" selected="selected"&gt;選択してください&lt;/option&gt;
                    &lt;!--{html_options options=$arrJob selected=$arrForm[$key1].value}--&gt;
                &lt;/select&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th&gt;生年月日&lt;/th&gt;
            &lt;td&gt;
                &lt;!--{assign var=key1 value="`$prefix`year"}--&gt;
                &lt;!--{assign var=key2 value="`$prefix`month"}--&gt;
                &lt;!--{assign var=key3 value="`$prefix`day"}--&gt;
                &lt;!--{assign var=errBirth value="`$arrErr.$key1``$arrErr.$key2``$arrErr.$key3`"}--&gt;
                &lt;!--{if $errBirth}--&gt;
                    &lt;div class="attention"&gt;&lt;!--{$errBirth}--&gt;&lt;/div&gt;
                &lt;!--{/if}--&gt;
                &lt;select name="&lt;!--{$key1}--&gt;" style="&lt;!--{$errBirth|sfGetErrorColor}--&gt;"&gt;
                    &lt;!--{html_options options=$arrYear selected=$arrForm[$key1].value|default:''}--&gt;
                &lt;/select&gt;年&nbsp;
                &lt;select name="&lt;!--{$key2}--&gt;" style="&lt;!--{$errBirth|sfGetErrorColor}--&gt;"&gt;
                    &lt;!--{html_options options=$arrMonth selected=$arrForm[$key2].value|default:''}--&gt;
                &lt;/select&gt;月&nbsp;
                &lt;select name="&lt;!--{$key3}--&gt;" style="&lt;!--{$errBirth|sfGetErrorColor}--&gt;"&gt;
                    &lt;!--{html_options options=$arrDay selected=$arrForm[$key3].value|default:''}--&gt;
                &lt;/select&gt;日
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!--{if $flgFields &gt; 2}--&gt;
            &lt;tr&gt;
                &lt;th&gt;希望するパスワード&lt;span class="attention"&gt;※&lt;/span&gt;&lt;br /&gt;
                &lt;/th&gt;
                &lt;td&gt;
                    &lt;!--{assign var=key1 value="`$prefix`password"}--&gt;
                    &lt;!--{assign var=key2 value="`$prefix`password02"}--&gt;
                    &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                        &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
                    &lt;!--{/if}--&gt;
                    &lt;input type="password" name="&lt;!--{$key1}--&gt;" id="password" value="&lt;!--{$arrForm[$key1].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key1].length}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;" class="validate[required,custom[onlyLetterNumber]] box120" /&gt;
                    &lt;p&gt;&lt;span class="attention mini"&gt;半角英数字&lt;!--{$smarty.const.PASSWORD_MIN_LEN}--&gt;～&lt;!--{$smarty.const.PASSWORD_MAX_LEN}--&gt;文字でお願いします。（記号可）&lt;/span&gt;&lt;/p&gt;
                    &lt;input type="password" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" maxlength="&lt;!--{$arrForm[$key2].length}--&gt;" style="&lt;!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}--&gt;" class="validate[equals[password]] box120" /&gt;
                    &lt;p&gt;&lt;span class="attention mini"&gt;確認のために2度入力してください。&lt;/span&gt;&lt;/p&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th&gt;パスワードを忘れた時のヒント&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
                &lt;td&gt;
                    &lt;!--{assign var=key1 value="`$prefix`reminder"}--&gt;
                    &lt;!--{assign var=key2 value="`$prefix`reminder_answer"}--&gt;
                    &lt;!--{if $arrErr[$key1] || $arrErr[$key2]}--&gt;
                        &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;!--{$arrErr[$key2]}--&gt;&lt;/div&gt;
                    &lt;!--{/if}--&gt;
                    質問：
                    &lt;select name="&lt;!--{$key1}--&gt;" style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;" class="validate[required]"&gt;
                        &lt;option value="" selected="selected"&gt;選択してください&lt;/option&gt;
                        &lt;!--{html_options options=$arrReminder selected=$arrForm[$key1].value}--&gt;
                    &lt;/select&gt;
                    &lt;br /&gt;
                    答え：&lt;input type="text" name="&lt;!--{$key2}--&gt;" value="&lt;!--{$arrForm[$key2].value|h}--&gt;" style="&lt;!--{$arrErr[$key2]|sfGetErrorColor}--&gt;; ime-mode: active;" class="validate[required] box260" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th&gt;メールマガジン送付について&lt;span class="attention"&gt;※&lt;/span&gt;&lt;/th&gt;
                &lt;td&gt;
                    &lt;!--{assign var=key1 value="`$prefix`mailmaga_flg"}--&gt;
                    &lt;!--{if $arrErr[$key1]}--&gt;
                        &lt;div class="attention"&gt;&lt;!--{$arrErr[$key1]}--&gt;&lt;/div&gt;
                    &lt;!--{/if}--&gt;
                    &lt;span style="&lt;!--{$arrErr[$key1]|sfGetErrorColor}--&gt;"&gt;
                        &lt;!--{html_radios name=$key1 options=$arrMAILMAGATYPE selected=$arrForm[$key1].value separator='&lt;br /&gt;'}--&gt;
                    &lt;/span&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;!--{/if}--&gt;
    &lt;!--{/if}--&gt;
&lt;!--{/strip}--&gt;
</pre>


解りづらいですね。はい。