app/template/default/Entry/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% form_theme form 'Form/form_div_layout.twig' %}
  5. {% block stylesheet %}
  6. {% endblock %}
  8. {% block javascript %}
  9.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  10.     <script src="{{ asset('js/InputCheck.js', 'user_data') }}"></script>
  11.       <style>
  12.         .err_txt {
  13.             color: #ed2929;
  14.             line-height: 1.8;
  15.         }
  16.         .ec-errorMessage {
  17.             color: red;
  18.             position: relative;
  19.         }
  21.         .ec-errorMessage::before {
  22.             content: "※";
  23.             color: red;
  24.             margin-right: 4px;
  25.         }
  26.     </style>
  27.     <script>
  28.         $(function() {
  29.             //submit時
  30.             $('#form1').submit(function(){
  31.                 err_sw = chkproc();
  32.                 if(err_sw == 1){
  33.                     return false;
  34.                 }
  35.             });
  36.         });
  38.         //入力チェック
  39.         function chkproc(){
  41.             // アラートの初期化
  42.             $('.err_txt').hide();
  43.             $('.err_txt').each(function(index){
  44.                 $(this).html('');
  45.             });
  47.             err_sw = 0;
  49.             var jump = "";
  51.             // お名前(姓)
  52.             var val1 = $('#entry_name_name01').val();
  53.             if(val1 == ""){
  54.                 err_sw = 1; if(jump == ""){jump = "#entry_name_name01";}
  55.                 $('#err_name01').html('※ お名前(姓)が入力されていません。');
  56.             }
  58.             // お名前(名)
  59.             var val1 = $('#entry_name_name02').val();
  60.             if(val1 == ""){
  61.                 err_sw = 1; if(jump == ""){jump = "#entry_name_name02";}
  62.                 $('#err_name02').html('※ お名前(名)が入力されていません。');
  63.             }
  65.             // お名前(フリガナ)(姓)
  66.             var val1 = $('#entry_kana_kana01').val();
  67.             if(val1 == ""){
  68.                 err_sw = 1; if(jump == ""){jump = "#entry_kana_kana01";}
  69.                 $('#err_kana01').html('※ お名前(フリガナ)(姓)が入力されていません。');
  70.             } else if(!checkCharType(val1, 'katakana')){
  71.                 err_sw = 1; if(jump == ""){jump = "#entry_kana_kana01";}
  72.                 $('#err_kana01').html('※ お名前(フリガナ)(姓)は全角カタカナで入力してください');
  73.             }
  75.             // お名前(フリガナ)(名)
  76.             var val1 = $('#entry_kana_kana02').val();
  77.             if(val1 == ""){
  78.                 err_sw = 1; if(jump == ""){jump = "#entry_kana_kana02";}
  79.                 $('#err_kana02').html('※ お名前(フリガナ)(名)が入力されていません。');
  80.             } else if(!checkCharType(val1, 'katakana')){
  81.                 err_sw = 1; if(jump == ""){jump = "#entry_kana_kana02";}
  82.                 $('#err_kana01').html('※ お名前(フリガナ)(名)は全角カタカナで入力してください');
  83.             }
  85.             // 郵便番号
  86.             var val1 = $('#entry_postal_code').val();
  87.             if(val1 == ""){
  88.                 err_sw = 1; if(jump == ""){jump = "#entry_postal_code";}
  89.                 $('#err_postal_code').html('※ 郵便番号が入力されていません。');
  90.             }
  92.             // 住所-都道府県
  93.             var val1 = $('#entry_address_pref option:selected').val();
  94.             if(val1 == ""){
  95.                 err_sw = 1; if(jump == ""){jump = "#entry_address_pref";}
  96.                 $('#err_pref').html('※ 都道府県が選択されていません。');
  97.             }
  99.             // 市区町村名
  100.             var val1 = $('#entry_address_addr01').val();
  101.             if(val1 == ""){
  102.                 err_sw = 1; if(jump == ""){jump = "#entry_address_addr01";}
  103.                 $('#err_addr01').html('※ 市区町村名が入力されていません。');
  104.             }
  106.             // 番地
  107.             var val1 = $('#entry_address_addr02').val();
  108.             if(val1 == ""){
  109.                 err_sw = 1; if(jump == ""){jump = "#entry_address_addr02";}
  110.                 $('#err_addr02').html('※ 番地が入力されていません。');
  111.             }
  113.             // 電話番号１
  114.             var val1 = $('#entry_phone_number').val();
  115.             if(val1 == ""){
  116.                 err_sw = 1; if(jump == ""){jump = "#entry_phone_number";}
  117.                 $('#err_phone_number').html('※ 電話番号１が入力されていません。');
  118.             } else if(!checkCharType(val1, 'tel')){
  119.                 err_sw = 1; if(jump == ""){jump = "#entry_phone_number";}
  120.                 $('#err_phone_number').html('※電話番号１が正しくありません');
  121.             }
  123.             // 電話番号２
  124.             var val1 = $('#entry_phone2').val();
  125.             if(val1 == ""){
  126.             } else if(!checkCharType(val1, 'tel')){
  127.                 err_sw = 1; if(jump == ""){jump = "#entry_phone2";}
  128.                 $('#err_phone2').html('※電話番号２が正しくありません');
  129.             }
  131.             // メールアドレス
  132.             var val1 = $('#entry_email_first').val();
  133.             if(val1 == ""){
  134.                 err_sw = 1; if(jump == ""){jump = "#entry_email_first";}
  135.                 $('#err_email_first').html('※ メールアドレスが入力されていません。');
  136.             }
  137.             var val2 = $('#entry_email_second').val();
  138.             if(val2 == ""){
  139.                 err_sw = 1; if(jump == ""){jump = "#entry_email_second";}
  140.                 $('#err_email_second').html('※ メールアドレス（確認）が入力されていません。');
  141.             }
  142.             if(val1 != "" && val2 != ""){
  143.                 if(val1 != val2){
  144.                     err_sw = 1; if(jump == ""){jump = "#entry_email_first";}
  145.                     $('#err_email_first').html('※ メールアドレスとメールアドレス（確認）が異なります。');
  146.                 //メールアドレス形式チェック
  147.                 } else if(!checkCharType(val1, 'email')){
  148.                     err_sw = 1; if(jump == ""){jump = "#entry_email_first";}
  149.                     $('#err_email_first').html('※ メールアドレスの形式が正しくありません');
  150.                 }
  151.             }
  153.             // パスワード
  154.             var val1 = $('#entry_plain_password_first').val();
  155.             if(val1 == ""){
  156.                 err_sw = 1; if(jump == ""){jump = "#entry_plain_password_first";}
  157.                 $('#err_plain_password_first').html('※ パスワードが入力されていません。');
  158.             }
  159.             var val2 = $('#entry_plain_password_second').val();
  160.             if(val2 == ""){
  161.                 err_sw = 1; if(jump == ""){jump = "#entry_plain_password_second";}
  162.                 $('#err_plain_password_second').html('※ パスワード（確認）が入力されていません。');
  163.             }
  164.             if(val1 != "" && val2 != ""){
  165.                 if(val1 != val2){
  166.                     err_sw = 1; if(jump == ""){jump = "#entry_plain_password_first";}
  167.                     $('#err_plain_password_first').html('※ パスワードとパスワード（確認）が異なります。');
  168.                 } else {
  169.                     //パスワードポリシーチェック
  170.                     if(!checkCharType(val1, 'pwd2')){
  171.                         err_sw = 1; if(jump == ""){jump = "#entry_plain_password_first";}
  172.                         $('#err_plain_password_first').html('※ パスワードは半角英数字記号をそれぞれ1文字以上含む8～32文字の組み合わせで入力ください、使用できる記号は+ ! - / * ~ _ ? スペースです');
  173.                     }
  174.                 }
  175.             }
  177.             // メールマガジン送付について
  178.             var val1 = $("input[name='entry[mailmaga_flg]']:checked").val();
  179.             if(val1 == "" || val1 === undefined){
  180.                 err_sw = 1; if(jump == ""){jump = "#entry_mailmaga_flg_0";}
  181.                 $('#err_mailmaga_flg').html('※ メールマガジン送付についてが選択されていません。');
  182.             }
  184.             // 該当箇所にスクロール
  185.             if(jump != ""){
  186.                 var position = $(jump).offset().top;
  187.                 $('html, body').animate({scrollTop: position}, 'fast');
  188.             }
  190.             $('.err_txt').each(function(index){
  191.                 if($(this).html() != ""){
  192.                     $(this).show();
  193.                 }
  194.             });
  196.             return err_sw;
  198.         }
  200.     </script>
  202. {% endblock javascript %}
  204. {% block main %}
  205. <!DOCTYPE html>
  206. <html>
  207. <head>
  208. <meta charset="UTF-8">
  209. {# ▼ ブロック：DispHtag ▼ #}
  210. {{ include('Block/DispHtag.twig') }}
  211. {# ▲ ブロック：DispHtag ▲ #}
  212. <title>ベースボール・マガジン社　BBM＠BOOK CART</title>
  213. <meta name="description" content="ベースボール・マガジン社が運営する総合スポーツサイト。ベースボール・マガジン社発行の書籍・雑誌・スポーツカードなどの新着情報、各競技の技術情報や専門家によるコラムなど、スポーツファンを応援する情報が満載です。">
  214. <meta name="keywords" content="ベースボールマガジン社,BBM">
  215. {# ▼ ブロック：DispHead ▼ #}
  216. {{ include('Block/DispHead.twig') }}
  217. {# ▲ ブロック：DispHead ▲ #}
  218. </head>
  220. <body id="pagetop" class="top">
  222. {# ▼ ブロック：DispBtag ▼ #}
  223. {{ include('Block/DispBtag.twig') }}
  224. {# ▲ ブロック：DispBtag ▲ #}
  226. {# ▼ ブロック：DispHeader ▼ #}
  227. {{ include('Block/DispHeaderEntry.twig') }}
  228. {# ▲ ブロック：DispHeader ▲ #}
  230.     <div id="leftcolumn" class="side_column">
  231.         <!-- ▼かごの中 -->
  232.         <br />
  233.         <div style="width:1000px; margin:0 auto;">
  234.             <div id="cart_area">
  235.                 <h2 class="cart"><span class="title"><img src="{{ asset('common_img/tit_bloc_cart.gif', 'user_data') }}" alt="現在のカゴの中" /></span></h2>
  236.                 <div class="block_body">
  237.                     <div class="information">
  238.                         <p class="item">合計数量：<span class="attention">{{ cartTotalQuantity|number_format }}</span></p>
  239.                         <p class="total">商品金額：<span class="price">{{ cartTotalPrice|number_format }}円</span></p>
  240.                     </div>
  241.                     <div class="btn">
  242.                         <a href="{{ url('cart') }}"><img class="hover_change_image" src="{{ asset('common_img/button/btn_bloc_cart.jpg', 'user_data') }}" alt="カゴの中を見る" /></a>
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.         <!-- ▲かごの中 -->
  248.     </div>
  250.     <br />
  251.     <div style="width:1000px; margin:0 auto;">
  252.         <h2 class="title">会員登録(入力ページ)</h2>
  253.         <form method="post" id="form1" name="form1" action="{{ url('entry_input') }}" novalidate class="h-adr">
  254.             <span class="p-country-name" style="display:none;">Japan</span>
  255.             {{ form_widget(form._token) }}
  257.             <table summary="会員登録フォーム" class="tbl">
  259.                 <col width="30%" />
  260.                 <col width="70%" />
  261.                 <tr>
  262.                     <th>お名前<span class="attention">※</span></th>
  263.                     <td>
  264.                         姓&nbsp;{{ form_widget(form.name.name01, { 'attr': { 'class': 'w200', 'placeholder': '姓' }}) }}
  265.                         名&nbsp;{{ form_widget(form.name.name02, { 'attr': { 'class': 'w200', 'placeholder': '名' }}) }}
  266.                         {{ form_errors(form.name.name01) }}
  267.                         {{ form_errors(form.name.name02) }}
  268.                         <!-- ▼エラーの際に表示▼-->
  269.                         <p class="err_txt" id="err_name01"></p>
  270.                         <p class="err_txt" id="err_name02"></p>
  271.                         <!-- ▲エラーの際に表示▲ -->
  272.                     </td>
  273.                 </tr>
  274.                 <tr>
  275.                     <th>お名前(フリガナ)<span class="attention">※</span></th>
  276.                     <td>
  277.                         セイ&nbsp;{{ form_widget(form.kana.kana01, { 'attr': { 'class': 'w200', 'placeholder': 'セイ' }}) }}
  278.                         メイ&nbsp;{{ form_widget(form.kana.kana02, { 'attr': { 'class': 'w200', 'placeholder': 'メイ' }}) }}
  279.                         {{ form_errors(form.kana.kana01) }}
  280.                         {{ form_errors(form.kana.kana02) }}
  281.                         <!-- ▼エラーの際に表示▼-->
  282.                         <p class="err_txt" id="err_kana01"></p>
  283.                         <p class="err_txt" id="err_kana02"></p>
  284.                         <!-- ▲エラーの際に表示▲ -->
  285.                     </td>
  286.                 </tr>
  287.                 <tr>
  288.                     <th>郵便番号<span class="attention">※</span></th>
  289.                     <td>
  290.                         <p class="top">
  291.                             〒&nbsp;{{ form_widget(form.postal_code, { 'attr': { 'class': 'p-postal-code w120', 'placeholder': '1038482' }}) }}
  292.                             {{ form_errors(form.postal_code) }}
  293.                             <!-- ▼エラーの際に表示▼-->
  294.                             <p class="err_txt" id="err_postal_code"></p>
  295.                             <!-- ▲エラーの際に表示▲ -->
  296.                         </p>
  297.                     </td>
  298.                 </tr>
  299.                 <tr>
  300.                     <th>住所<span class="attention">※</span></th>
  301.                     <td>
  302.                         {{ form_widget(form.address.pref, { 'attr': { 'class': 'p-region-id' }}) }}
  303.                         {{ form_errors(form.address.pref) }}
  304.                         <!-- ▼エラーの際に表示▼-->
  305.                         <p class="err_txt" id="err_pref"></p>
  306.                         <!-- ▲エラーの際に表示▲ -->
  307.                         <p class="top">
  308.                             {{ form_widget(form.address.addr01, { 'attr': { 'class': 'p-locality p-street-address w400', 'placeholder': '市区町村名・町域(例：東京都中央区日本橋浜町)' }}) }}
  309.                             {{ form_errors(form.address.addr01) }}
  310.                             <!-- ▼エラーの際に表示▼-->
  311.                             <p class="err_txt" id="err_addr01"></p>
  312.                             <!-- ▲エラーの際に表示▲ -->
  313.                         </p>
  314.                         <p class="mini"><span class="attention">市区町村名・町域 例：東京都中央区日本橋浜町</span></p>
  315.                         <p class="top">
  316.                             {{ form_widget(form.address.addr02,  { 'attr': { 'class': 'p-extended-address w400', 'placeholder': '番地・ビル名(例：2-61-9 TIE浜町ビル)' }}) }}
  317.                             {{ form_errors(form.address.addr02) }}
  318.                             <!-- ▼エラーの際に表示▼-->
  319.                             <p class="err_txt" id="err_addr02"></p>
  320.                             <!-- ▲エラーの際に表示▲ -->
  321.                         </p>
  322.                         <p class="mini"><span class="attention">番地・ビル名 例：2-61-9 TIE浜町ビル（マンション名・号室は必ず記入してください）</span></p>
  323.                         <p class="top">
  324.                             {{ form_widget(form.company_name,  { 'attr': { 'class': 'w400', 'placeholder': '法人名(例：株式会社ベースボール･マガジン社)' }}) }}
  325.                             {{ form_errors(form.company_name) }}
  326.                             <!-- ▼エラーの際に表示▼-->
  327.                             <p class="err_txt" id="err_company_name"></p>
  328.                             <!-- ▲エラーの際に表示▲ -->
  329.                         </p>
  330.                         <p class="mini"><span class="attention">法人様の場合、法人名（個人様の場合は空欄）</span></p>
  331.                         <p class="mini"><span class="attention">　例：はるのビル201　または　ベースボール・マガジン社</span></p>
  332.                         <p class="mini"><span class="attention">住所は2つに分けてご記入ください。マンション名は必ず記入してください。</span></p>
  333.                     </td>
  334.                 </tr>
  335.                 <tr>
  336.                     <th>電話番号１<span class="attention">※</span></th>
  337.                     <td>
  338.                         {{ form_widget(form.phone_number) }}
  339.                         {{ form_errors(form.phone_number) }}
  340.                         <p class="mini"><span class="attention">例：0312345678/09012345678 ※ 最も連絡の取りやすい連絡先を入力して下さい。</span></p>
  341.                         <!-- ▼エラーの際に表示▼-->
  342.                         <p class="err_txt" id="err_phone_number"></p>
  343.                         <!-- ▲エラーの際に表示▲ -->
  344.                     </td>
  345.                 </tr>
  346.                 <tr>
  347.                     <th>電話番号２</th>
  348.                     <td>
  349.                         {{ form_widget(form.phone2) }}
  350.                         {{ form_errors(form.phone2) }}
  351.                         <p class="mini"><span class="attention">例：0312345678/09012345678 ※ その他の連絡先を入力して下さい。</span></p>
  352.                         <!-- ▼エラーの際に表示▼-->
  353.                         <p class="err_txt" id="err_phone2"></p>
  354.                         <!-- ▲エラーの際に表示▲ -->
  355.                     </td>
  356.                 </tr>
  357.                 <tr>
  358.                     <th>メールアドレス<span class="attention">※</span></th>
  359.                     <td>
  360.                         {{ form_widget(form.email.first, { 'attr': { 'class': 'w300', 'placeholder': '例：ec-cube@example.com' }}) }}
  361.                         {{ form_errors(form.email.first) }}
  362.                         <p class="mini"><span class="attention">メールアドレスは半角のみご記入ください。</span></p>
  363.                         {{ form_widget(form.email.second, { 'attr': { 'class': 'w300', 'placeholder': '確認のためもう一度入力してください' }}) }}
  364.                         {{ form_errors(form.email.second) }}
  365.                         <p class="mini"><span class="attention">※ 確認のためにもう一度メールアドレスを入力してください。</span></p>
  366.                         <!-- ▼エラーの際に表示▼-->
  367.                         <p class="err_txt" id="err_email_first"></p>
  368.                         <p class="err_txt" id="err_email_second"></p>
  369.                         <!-- ▲エラーの際に表示▲ -->
  370.                     </td>
  371.                 </tr>
  372.                 <tr>
  373.                     <th>希望するパスワード<span class="attention">※</span><br />
  374.                     </th>
  375.                     <td>
  376.                         {{ form_widget(form.plain_password.first, {
  377.                             'attr': { 'class': 'w300', 'placeholder': '半角英数記号8〜32文字' },
  378.                             'type': 'password'
  379.                         }) }}
  380.                         {{ form_errors(form.plain_password.first) }}
  381.                         <p><span class="attention mini">パスワードは半角英数字記号をそれぞれ1文字以上含む8～32文字の組み合わせで入力ください。</span></p>
  382.                         <p><span class="attention mini">使用できる記号は+ ! - / * ~ _ ? スペースです。</span></p>
  383.                         {{ form_widget(form.plain_password.second, {
  384.                             'attr': { 'class': 'w300', 'placeholder': '確認のためもう一度入力してください'|trans },
  385.                             'type': 'password'
  386.                         }) }}
  387.                         {{ form_errors(form.plain_password.second) }}
  388.                         <p><span class="attention mini">確認のために2度入力してください。</span></p>
  389.                         <!-- ▼エラーの際に表示▼-->
  390.                         <p class="err_txt" id="err_plain_password_first"></p>
  391.                         <p class="err_txt" id="err_plain_password_second"></p>
  392.                         <!-- ▲エラーの際に表示▲ -->
  393.                     </td>
  394.                 </tr>
  395.                 <tr>
  396.                     <th>メールマガジン送付について<span class="attention">※</span></th>
  397.                     <td>
  398.                         <span>
  399.                             {{ form_widget(form.mailmaga_flg) }}
  400.                             {{ form_errors(form.mailmaga_flg) }}
  401.                             <!-- ▼エラーの際に表示▼-->
  402.                             <p class="err_txt" id="err_mailmaga_flg"></p>
  403.                             <!-- ▲エラーの際に表示▲ -->
  404.                         </span>
  405.                     </td>
  406.                 </tr>
  408.             </table>
  410.             <div class="btn_area align_c mt30">
  411.                 <ul>
  412.                     <li>
  413.                         <button type="submit" class="hover_change_image" name="mode" value="confirm" ><img src="{{ asset('common_img/button/btn_confirm.jpg', 'user_data') }}" alt="確認ページへ" /></button>
  414.                     </li>
  415.                 </ul>
  416.             </div>
  418.         </form>
  419.     </div>
  421. {# ▼ ブロック：DispFooter ▼ #}
  422. {{ include('Block/DispFooter.twig') }}
  423. {# ▲ ブロック：DispFooter ▲ #}
  425. {# ▼ ブロック：DispFtag ▼ #}
  426. {{ include('Block/DispFtag.twig') }}
  427. {# ▲ ブロック：DispFtag ▲ #}
  429. </body>
  430. </html>
  431. {% endblock %}
  432. {# ▲ main ▲ #}