LoginSignup
2
1

More than 5 years have passed since last update.

@keitone(トネ すけ)

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

Last updated at Posted at 2015-05-29

jQuery-Validation-Engineとは？

入力フィールドからフォーカスを外すと吹き出しでチェックがでる機能。
↓こんなの
de6381acc4284379eff27eddb8032674.png
詳細はコチラ。

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

ダウンロード

ここから

実装方法

※修正するソースは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
↓こうなっているので


@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");
↓こうする

@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");

・/data/Smarty/templates/default/site_frame.tpl
61行目が↓こうなっているので



<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.colorbox/jquery.colorbox-min.js"></script>
↓こうする


<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>
<!-- 追加ここまで -->

４．ソースの修正（実装）

・/data/Smarty/templates/default/frontparts/form_personal_input.tpl
・/data/Smarty/templates/default/shopping/nonmember_input.tpl

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

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

４．１．修正後ソースサンプル

・/data/Smarty/templates/default/frontparts/form_personal_input.tpl

こんなふうになります。


<!--{*
/*
 * 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.
 */
*}-->

<!--{strip}-->
    <col width="30%" />
    <col width="70%" />
    <tr>
        <th>お名前<span class="attention">※</span></th>
        <td>
            <!--{assign var=key1 value="$prefixname01"}-->
            <!--{assign var=key2 value="$prefixname02"}-->
            <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
            <!--{/if}-->
            姓 <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: active;" class="validate[required] box120" /> 
            名 <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key2].length}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: active;" class="validate[required] box120" />
        </td>
    </tr>
    <tr>
        <th>お名前(フリガナ)<!--{if !$smarty.const.FORM_COUNTRY_ENABLE}--><span class="attention">※</span><!--{/if}--></th>
        <td>
            <!--{assign var=key1 value="$prefixkana01"}-->
            <!--{assign var=key2 value="$prefixkana02"}-->
            <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
            <!--{/if}-->
            セイ <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: active;" class="validate[required] box120" /> 
            メイ <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: active;" class="validate[required] box120" />
        </td>
    </tr>
    <tr>
        <th>会社名</th>
        <td>
            <!--{assign var=key1 value="$prefixcompany_name"}-->
            <!--{if $arrErr[$key1]}-->
                <div class="attention"><!--{$arrErr[$key1]}--></div>
            <!--{/if}-->
            <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: active;" class="box300" /> 
        </td>
    </tr>
    <!--{assign var=key1 value="$prefixzip01"}-->
    <!--{assign var=key2 value="$prefixzip02"}-->
    <!--{assign var=key3 value="$prefixpref"}-->
    <!--{assign var=key4 value="$prefixaddr01"}-->
    <!--{assign var=key5 value="$prefixaddr02"}-->
    <!--{assign var=key6 value="$prefixcountry_id"}-->
    <!--{assign var=key7 value="$prefixzipcode"}-->
    <!--{if !$smarty.const.FORM_COUNTRY_ENABLE}-->
    <input type="hidden" name="<!--{$key6}-->" value="<!--{$smarty.const.DEFAULT_COUNTRY_ID}-->" />
    <!--{else}-->
    <tr>
        <th>国<span class="attention">※</span></th>
        <td>
            <!--{if $arrErr[$key6]}-->
                <div class="attention"><!--{$arrErr[$key6]}--></div>
            <!--{/if}-->
            <select name="<!--{$key6}-->" style="<!--{$arrErr[$key6]|sfGetErrorColor}-->">
                    <option value="" selected="selected">国を選択</option>
                    <!--{html_options options=$arrCountry selected=$arrForm[$key6].value|h|default:$smarty.const.DEFAULT_COUNTRY_ID}-->
            </select>
        </td>
    </tr>
    <tr>
        <th>ZIP CODE</th>
        <td>
            <!--{if $arrErr[$key7]}-->
                <div class="attention"><!--{$arrErr[$key7]}--></div>
            <!--{/if}-->
            <input type="text" name="<!--{$key7}-->" value="<!--{$arrForm[$key7].value|h}-->" maxlength="<!--{$arrForm[$key7].length}-->" class="box120" style="<!--{$arrErr[$key7]|sfGetErrorColor}-->; ime-mode: disabled;" />
        </td>
    </tr>
    <!--{/if}-->
    <tr>
        <th>郵便番号<!--{if !$smarty.const.FORM_COUNTRY_ENABLE}--><span class="attention">※</span><!--{/if}--></th>
        <td>
            <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
            <!--{/if}-->
            <p class="top">〒 <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /> - <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key2].length}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /> 
            <a href="http://search.post.japanpost.jp/zipcode/" target="_blank"><span class="mini">郵便番号検索</span></a>
            </p>
            <p class="zipimg">
                <a href="<!--{$smarty.const.ROOT_URLPATH}-->input_zip.php" onclick="eccube.getAddress('<!--{$smarty.const.INPUT_ZIP_URLPATH}-->', '<!--{$key1}-->', '<!--{$key2}-->', '<!--{$key3}-->', '<!--{$key4}-->'); return false;" target="_blank">
                    <img src="<!--{$TPL_URLPATH}-->img/button/btn_address_input.jpg" alt="住所自動入力" /></a>
                 <span class="mini">郵便番号を入力後、クリックしてください。</span>
            </p>
        </td>
    </tr>
    <tr>
        <th>住所<span class="attention">※</span></th>
        <td>
            <!--{if $arrErr[$key3] || $arrErr[$key4] || $arrErr[$key5]}-->
                <div class="attention"><!--{$arrErr[$key3]}--><!--{$arrErr[$key4]}--><!--{$arrErr[$key5]}--></div>
            <!--{/if}-->
            <select name="<!--{$key3}-->" style="<!--{$arrErr[$key3]|sfGetErrorColor}-->" class="validate[required]">
                    <option value="" selected="selected">都道府県を選択</option>
                    <!--{html_options options=$arrPref selected=$arrForm[$key3].value|h}-->
            </select>
            <p class="top"><input type="text" name="<!--{$key4}-->" value="<!--{$arrForm[$key4].value|h}-->" class="validate[required] box300" style="<!--{$arrErr[$key4]|sfGetErrorColor}-->; ime-mode: active;" /><br />
                <!--{$smarty.const.SAMPLE_ADDRESS1}--></p>
            <p class="top"><input type="text" name="<!--{$key5}-->" value="<!--{$arrForm[$key5].value|h}-->" class="validate[required] box300" style="<!--{$arrErr[$key5]|sfGetErrorColor}-->; ime-mode: active;" /><br />
                <!--{$smarty.const.SAMPLE_ADDRESS2}--></p>
            <p class="mini"><span class="attention">住所は2つに分けてご記入ください。マンション名は必ず記入してください。</span></p>
        </td>
    </tr>
    <tr>
        <th>電話番号<span class="attention">※</span></th>
        <td>
            <!--{assign var=key1 value="$prefixtel01"}-->
            <!--{assign var=key2 value="$prefixtel02"}-->
            <!--{assign var=key3 value="$prefixtel03"}-->
            <!--{if $arrErr[$key1] || $arrErr[$key2] || $arrErr[$key3]}-->
                <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--><!--{$arrErr[$key3]}--></div>
            <!--{/if}-->
            <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /> - <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key2].length}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" /> - <input type="text" name="<!--{$key3}-->" value="<!--{$arrForm[$key3].value|h}-->" maxlength="<!--{$arrForm[$key3].length}-->" style="<!--{$arrErr[$key3]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[onlyNumberSp]] box60" />
        </td>
    </tr>
    <tr>
        <th>FAX</th>
        <td>
            <!--{assign var=key1 value="$prefixfax01"}-->
            <!--{assign var=key2 value="$prefixfax02"}-->
            <!--{assign var=key3 value="$prefixfax03"}-->
            <!--{if $arrErr[$key1] || $arrErr[$key2] || $arrErr[$key3]}-->
                <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--><!--{$arrErr[$key3]}--></div>
            <!--{/if}-->
            <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" /> - <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key2].length}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" /> - <input type="text" name="<!--{$key3}-->" value="<!--{$arrForm[$key3].value|h}-->" maxlength="<!--{$arrForm[$key3].length}-->" style="<!--{$arrErr[$key3]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[custom[onlyNumberSp]] box60" />
        </td>
    </tr>
    <!--{if $flgFields > 1}-->
        <tr>
            <th>メールアドレス<span class="attention">※</span></th>
            <td>
                <!--{assign var=key1 value="$prefixemail"}-->
                <!--{assign var=key2 value="$prefixemail02"}-->
                <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                    <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
                <!--{/if}-->
                <input type="text" id="email" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[required,custom[email]] box300 top" /><br />
                <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" style="<!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: disabled;" class="validate[equals[email]] box300" /><br />
                <span class="attention mini">確認のため2度入力してください。</span>
            </td>
        </tr>
        <!--{if $emailMobile}-->
            <tr>
                <th>携帯メールアドレス</th>
                <td>
                    <!--{assign var=key1 value="$prefixemail_mobile"}-->
                    <!--{assign var=key2 value="$prefixemail_mobile02"}-->
                    <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                    <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
                    <!--{/if}-->
                    <input type="text" name="<!--{$key1}-->" value="<!--{$arrForm[$key1].value|h}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->; ime-mode: disabled;" maxlength="<!--{$smarty.const.MTEXT_LEN}-->" class="box300 top" /><br />
                    <input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" style="<!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: disabled;" maxlength="<!--{$smarty.const.MTEXT_LEN}-->" class="box300" /><br />
                    <span class="attention mini">確認のため2度入力してください。</span>
                </td>
            </tr>
        <!--{/if}-->
        <tr>
            <th>性別<span class="attention">※</span></th>
            <td>
                <!--{assign var=key1 value="$prefixsex"}-->
                <!--{if $arrErr[$key1]}-->
                    <div class="attention"><!--{$arrErr[$key1]}--></div>
                <!--{/if}-->
                <span style="<!--{$arrErr[$key1]|sfGetErrorColor}-->">
                    <!--{html_radios name=$key1 options=$arrSex selected=$arrForm[$key1].value separator='<br />'}-->
                </span>
            </td>
        </tr>
        <tr>
            <th>職業</th>
            <td>
                <!--{assign var=key1 value="$prefixjob"}-->
                <!--{if $arrErr[$key1]}-->
                    <div class="attention"><!--{$arrErr[$key1]}--></div>
                <!--{/if}-->
                <select name="<!--{$key1}-->">
                    <option value="" selected="selected">選択してください</option>
                    <!--{html_options options=$arrJob selected=$arrForm[$key1].value}-->
                </select>
            </td>
        </tr>
        <tr>
            <th>生年月日</th>
            <td>
                <!--{assign var=key1 value="$prefixyear"}-->
                <!--{assign var=key2 value="$prefixmonth"}-->
                <!--{assign var=key3 value="$prefixday"}-->
                <!--{assign var=errBirth value="$arrErr.$key1$arrErr.$key2$arrErr.$key3"}-->
                <!--{if $errBirth}-->
                    <div class="attention"><!--{$errBirth}--></div>
                <!--{/if}-->
                <select name="<!--{$key1}-->" style="<!--{$errBirth|sfGetErrorColor}-->">
                    <!--{html_options options=$arrYear selected=$arrForm[$key1].value|default:''}-->
                </select>年 
                <select name="<!--{$key2}-->" style="<!--{$errBirth|sfGetErrorColor}-->">
                    <!--{html_options options=$arrMonth selected=$arrForm[$key2].value|default:''}-->
                </select>月 
                <select name="<!--{$key3}-->" style="<!--{$errBirth|sfGetErrorColor}-->">
                    <!--{html_options options=$arrDay selected=$arrForm[$key3].value|default:''}-->
                </select>日
            </td>
        </tr>
        <!--{if $flgFields > 2}-->
            <tr>
                <th>希望するパスワード<span class="attention">※</span><br />
                </th>
                <td>
                    <!--{assign var=key1 value="$prefixpassword"}-->
                    <!--{assign var=key2 value="$prefixpassword02"}-->
                    <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                        <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
                    <!--{/if}-->
                    <input type="password" name="<!--{$key1}-->" id="password" value="<!--{$arrForm[$key1].value|h}-->" maxlength="<!--{$arrForm[$key1].length}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->" class="validate[required,custom[onlyLetterNumber]] box120" />
                    <p><span class="attention mini">半角英数字<!--{$smarty.const.PASSWORD_MIN_LEN}-->～<!--{$smarty.const.PASSWORD_MAX_LEN}-->文字でお願いします。（記号可）</span></p>
                    <input type="password" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" maxlength="<!--{$arrForm[$key2].length}-->" style="<!--{$arrErr[$key1]|cat:$arrErr[$key2]|sfGetErrorColor}-->" class="validate[equals[password]] box120" />
                    <p><span class="attention mini">確認のために2度入力してください。</span></p>
                </td>
            </tr>
            <tr>
                <th>パスワードを忘れた時のヒント<span class="attention">※</span></th>
                <td>
                    <!--{assign var=key1 value="$prefixreminder"}-->
                    <!--{assign var=key2 value="$prefixreminder_answer"}-->
                    <!--{if $arrErr[$key1] || $arrErr[$key2]}-->
                        <div class="attention"><!--{$arrErr[$key1]}--><!--{$arrErr[$key2]}--></div>
                    <!--{/if}-->
                    質問：
                    <select name="<!--{$key1}-->" style="<!--{$arrErr[$key1]|sfGetErrorColor}-->" class="validate[required]">
                        <option value="" selected="selected">選択してください</option>
                        <!--{html_options options=$arrReminder selected=$arrForm[$key1].value}-->
                    </select>
                    <br />
                    答え：<input type="text" name="<!--{$key2}-->" value="<!--{$arrForm[$key2].value|h}-->" style="<!--{$arrErr[$key2]|sfGetErrorColor}-->; ime-mode: active;" class="validate[required] box260" />
                </td>
            </tr>
            <tr>
                <th>メールマガジン送付について<span class="attention">※</span></th>
                <td>
                    <!--{assign var=key1 value="$prefixmailmaga_flg"}-->
                    <!--{if $arrErr[$key1]}-->
                        <div class="attention"><!--{$arrErr[$key1]}--></div>
                    <!--{/if}-->
                    <span style="<!--{$arrErr[$key1]|sfGetErrorColor}-->">
                        <!--{html_radios name=$key1 options=$arrMAILMAGATYPE selected=$arrForm[$key1].value separator='<br />'}-->
                    </span>
                </td>
            </tr>
        <!--{/if}-->
    <!--{/if}-->
<!--{/strip}-->

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1