Q&A
前提・実現したいこと
課題で架空の通販サイトを作成しています。
クレジットカード情報の入力フォームでJavaScriptを使用した入力チェックを行いたいです。
分からず困っている点は
・セレクトボックスで未選択の際にエラーメッセージを表示
・有効期限が過去の日付だった場合にエラーメッセージを表示
する方法です。
知識不足で恐縮ですが、ご教示頂けると助かります。
該当のソースコード
JavaScript
1// 入力内容チェックのための関数 2function credit_input_check() { 3 4 // クレジットカード選択時のみ入力チェックを実行 5 radio = document.getElementsByName('payMethod'); 6 if (radio[0].checked) { 7 8 var result = true; 9 10 // エラー用装飾のためのクラスリセット 11 $('#cardNo').removeClass("inp_error"); 12 $('#cardSecurityCode').removeClass("inp_error"); 13 14 // 入力エラー文をリセット 15 $("#cardNo_error").empty(); 16 $("#cardSecurityCode").empty(); 17 18 // 入力内容セット 19 var cardNo = $("#cardNo").val(); 20 var cardSecurityCode = $("#cardSecurityCode").val(); 21 22 23 // 入力内容チェック 24 25 // カード番号 26 if (cardNo == "") { 27 $("#cardNo_error").html("* カード番号は必須項目です。"); 28 $("#cardNo").addClass("inp_error"); 29 result = false; 30 }else if(!cardNo.match(/^[0-9]+$/)){ 31 $('#cardNo_error').html("* カード番号は正しい形式で入力してください。"); 32 $("#cardNo").addClass("inp_error"); 33 result = false; 34 }else if(cardNo.length != 16){ 35 $("#cardNo_error").html("* カード番号は16桁で入力してください。"); 36 $("#cardNo").addClass("inp_error"); 37 result = false; 38 } 39 40 41 // セキュリティコード 42 if (cardSecurityCode == "") { 43 $("#cardSecurityCode_error").html("* セキュリティコードは必須項目です。"); 44 $("#cardSecurityCode").addClass("inp_error"); 45 result = false; 46 }else if(cardSecurityCode.length != 3){ 47 $("#cardSecurityCode_error").html("* セキュリティコードは3桁で入力してください。"); 48 $("#cardSecurityCode").addClass("inp_error"); 49 result = false; 50 }
HTML
1 <form method="post" th:action="@{/order/check}" onsubmit="return credit_input_check();"> 2 3 <ul class="payment_method_select"> 4 <li><label class="radio_label"> <input type="radio" 5 name="payMethod" th:checked="${payMethod == 1}" th:value = "1" onclick="payChange();" />クレジットカード 6 </label></li> 7 <li><label class="radio_label"> <input type="radio" 8 name="payMethod" th:checked="${payMethod == 2}" th:value = "2" onclick=" payChange();" 9 checked="checked" />銀行振り込み 10 </label></li> 11 <li><label class="radio_label"> <input type="radio" 12 name="payMethod" th:checked="${payMethod == 3}" th:value = "3" onclick=" payChange();" />着払い 13 </label></li> 14 <li><label class="radio_label"> <input type="radio" 15 name="payMethod" th:checked="${payMethod == 4}" th:value = "4" onclick=" payChange();" />電子マネー 16 </label></li> 17 <li><label class="radio_label"> <input type="radio" 18 name="payMethod" th:checked="${payMethod == 5}" th:value = "5" onclick=" payChange();" />コンビニ決済 19 </label></li> 20 </ul> 21 <div id="card" class="card_info" th:object="${paymentCredit}"> 22 <dl class="input_list"> 23 <dt class="input_title">カード番号</dt> 24 <dd class="input_value"> 25 <input type="text" name="cardNo" th:value="*{cardNo}" id="cardNo" /> 26 <br /><span id="cardNo_error" class="error_m"></span> 27 </dd> 28 <dt class="input_title">有効期限</dt> 29 <dd class="input_value"> 30 <select name="cardPeriodMonth" required="required"> 31 <option value="01" th:selected="*{cardPeriodMonth == 1}">01</option> 32 <option value="02" th:selected="*{cardPeriodMonth == 2}">02</option> 33 <option value="03" th:selected="*{cardPeriodMonth == 3}">03</option> 34 <option value="04" th:selected="*{cardPeriodMonth == 4}">04</option> 35 <option value="05" th:selected="*{cardPeriodMonth == 5}">05</option> 36 <option value="06" th:selected="*{cardPeriodMonth == 6}">06</option> 37 <option value="07" th:selected="*{cardPeriodMonth == 7}">07</option> 38 <option value="08" th:selected="*{cardPeriodMonth == 8}">08</option> 39 <option value="09" th:selected="*{cardPeriodMonth == 9}">09</option> 40 <option value="10" th:selected="*{cardPeriodMonth == 10}">10</option> 41 <option value="11" th:selected="*{cardPeriodMonth == 11}">11</option> 42 <option value="12" th:selected="*{cardPeriodMonth == 12}">12</option> 43 </select>/ <select name="cardPeriodYear" required="required"> 44 <option value="15" th:selected="*{cardPeriodYear == 15}">15</option> 45 <option value="16" th:selected="*{cardPeriodYear == 16}">16</option> 46 <option value="17" th:selected="*{cardPeriodYear == 17}">17</option> 47 <option value="18" th:selected="*{cardPeriodYear == 18}">18</option> 48 <option value="19" th:selected="*{cardPeriodYear == 19}">19</option> 49 <option value="20" th:selected="*{cardPeriodYear == 20}">20</option> 50 <option value="21" th:selected="*{cardPeriodYear == 21}">21</option> 51 <option value="22" th:selected="*{cardPeriodYear == 22}">22</option> 52 <option value="23" th:selected="*{cardPeriodYear == 23}">23</option> 53 <option value="24" th:selected="*{cardPeriodYear == 24}">24</option> 54 <option value="25" th:selected="*{cardPeriodYear == 25}">25</option> 55 <option value="26" th:selected="*{cardPeriodYear == 26}">26</option> 56 <option value="27" th:selected="*{cardPeriodYear == 27}">27</option> 57 <option value="28" th:selected="*{cardPeriodYear == 28}">28</option> 58 <option value="29" th:selected="*{cardPeriodYear == 29}">29</option> 59 <option value="30" th:selected="*{cardPeriodYear == 30}">30</option> 60 </select> 61 62 </dd> 63 <dt class="input_title"> 64 セキュリティコード<span class="comments">(クレジットカードの背面に記載されている3桁の番号)</span> 65 </dt> 66 <dd class="input_value"> 67 <input type="text" name="cardSecurityCode" 68 th:value="*{cardSecurityCode}" id="cardSecurityCode" /> 69 <br /><span id="cardSecurityCode_error" class="error_m"></span> 70 71 </dd> 72 73 <dt class="input_title">カード種別</dt> 74 <dd class="input_value"> 75 <select name="cardType" id="cardType"> 76 <option value="0"></option> 77 <option value="1" th:selected="*{cardType == 1}">Master Card</option> 78 79 <option value="2" th:selected="*{cardType == 2}">JCB</option> 80 81 <option value="3" th:selected="*{cardType == 3}">VISA</option> 82 83 <option value="4" th:selected="*{cardType == 4}">DC</option> 84 85 <option value="5" th:selected="*{cardType == 5}">UC</option> 86 </select> 87 88 <br /><span id="cardType_error" class="error_m"></span> 89 90 </dd> 91 </dl> 92 93 <div th:object="${userBean}"> 94 <input type="hidden" name="postalCode" th:value="*{postalCode}" /> 95 <input type="hidden" name="address" th:value="*{address}" /> <input 96 type="hidden" name="name" th:value="*{name}" /> <input 97 type="hidden" name="phoneNumber" th:value="*{phoneNumber}" /> 98 </div> 99 </div> 100 <input type="submit" class="send_button" value="次へ" /> 101 </form> 102 103 <form method="post" class="update" th:action="@{/address/input/back}" th:object="${userBean}"> 104 <input type="hidden" name="postalCode" th:value="*{postalCode}" /> 105 <input type="hidden" name="address" th:value="*{address}" /> <input 106 type="hidden" name="name" th:value="*{name}" /> <input 107 type="hidden" name="phoneNumber" th:value="*{phoneNumber}" /> <input 108 type="submit" value="戻る" class="send_button" /> 109 110 </form>
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/22 07:09 編集
2019/02/22 07:14
2019/02/22 07:31
2019/02/22 09:26