質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

JavaScript:セレクトボックスの入力チェック

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,432

score 15

前提・実現したいこと

課題で架空の通販サイトを作成しています。
クレジットカード情報の入力フォームでJavaScriptを使用した入力チェックを行いたいです。

分からず困っている点は
・セレクトボックスで未選択の際にエラーメッセージを表示
・有効期限が過去の日付だった場合にエラーメッセージを表示
する方法です。

知識不足で恐縮ですが、ご教示頂けると助かります。

該当のソースコード

// 入力内容チェックのための関数
function credit_input_check() {

  // クレジットカード選択時のみ入力チェックを実行
  radio = document.getElementsByName('payMethod');
  if (radio[0].checked) {

    var result = true;

    // エラー用装飾のためのクラスリセット
    $('#cardNo').removeClass("inp_error");
    $('#cardSecurityCode').removeClass("inp_error");

    // 入力エラー文をリセット
    $("#cardNo_error").empty();
    $("#cardSecurityCode").empty();

    // 入力内容セット
    var cardNo = $("#cardNo").val();
    var cardSecurityCode = $("#cardSecurityCode").val();


    // 入力内容チェック

    // カード番号
    if (cardNo == "") {
      $("#cardNo_error").html("* カード番号は必須項目です。");
      $("#cardNo").addClass("inp_error");
      result = false;
    }else if(!cardNo.match(/^[0-9]+$/)){
        $('#cardNo_error').html("* カード番号は正しい形式で入力してください。");
        $("#cardNo").addClass("inp_error");
        result = false;
    }else if(cardNo.length != 16){
        $("#cardNo_error").html("* カード番号は16桁で入力してください。");
        $("#cardNo").addClass("inp_error");
        result = false;
    }


    // セキュリティコード
    if (cardSecurityCode == "") {
      $("#cardSecurityCode_error").html("* セキュリティコードは必須項目です。");
      $("#cardSecurityCode").addClass("inp_error");
      result = false;
    }else if(cardSecurityCode.length != 3){
        $("#cardSecurityCode_error").html("* セキュリティコードは3桁で入力してください。");
        $("#cardSecurityCode").addClass("inp_error");
        result = false;
    }
     <form method="post" th:action="@{/order/check}" onsubmit="return credit_input_check();">

       <ul class="payment_method_select">
         <li><label class="radio_label"> <input type="radio"
             name="payMethod" th:checked="${payMethod == 1}" th:value = "1" onclick="payChange();" />クレジットカード
         </label></li>
         <li><label class="radio_label"> <input type="radio"
             name="payMethod" th:checked="${payMethod == 2}" th:value = "2" onclick=" payChange();"
             checked="checked" />銀行振り込み
         </label></li>
         <li><label class="radio_label"> <input type="radio"
             name="payMethod" th:checked="${payMethod == 3}" th:value = "3" onclick=" payChange();" />着払い
         </label></li>
         <li><label class="radio_label"> <input type="radio"
             name="payMethod" th:checked="${payMethod == 4}" th:value = "4" onclick=" payChange();" />電子マネー
         </label></li>
         <li><label class="radio_label"> <input type="radio"
             name="payMethod" th:checked="${payMethod == 5}" th:value = "5" onclick=" payChange();" />コンビニ決済
         </label></li>
       </ul>
       <div id="card" class="card_info" th:object="${paymentCredit}">
         <dl class="input_list">
           <dt class="input_title">カード番号</dt>
           <dd class="input_value">
             <input type="text" name="cardNo" th:value="*{cardNo}" id="cardNo" />
             <br /><span id="cardNo_error" class="error_m"></span>
           </dd>
           <dt class="input_title">有効期限</dt>
           <dd class="input_value">
             <select name="cardPeriodMonth" required="required">
               <option value="01" th:selected="*{cardPeriodMonth == 1}">01</option>
               <option value="02" th:selected="*{cardPeriodMonth == 2}">02</option>
               <option value="03" th:selected="*{cardPeriodMonth == 3}">03</option>
               <option value="04" th:selected="*{cardPeriodMonth == 4}">04</option>
               <option value="05" th:selected="*{cardPeriodMonth == 5}">05</option>
               <option value="06" th:selected="*{cardPeriodMonth == 6}">06</option>
               <option value="07" th:selected="*{cardPeriodMonth == 7}">07</option>
               <option value="08" th:selected="*{cardPeriodMonth == 8}">08</option>
               <option value="09" th:selected="*{cardPeriodMonth == 9}">09</option>
               <option value="10" th:selected="*{cardPeriodMonth == 10}">10</option>
               <option value="11" th:selected="*{cardPeriodMonth == 11}">11</option>
               <option value="12" th:selected="*{cardPeriodMonth == 12}">12</option>
             </select>/ <select name="cardPeriodYear" required="required">
               <option value="15" th:selected="*{cardPeriodYear == 15}">15</option>
               <option value="16" th:selected="*{cardPeriodYear == 16}">16</option>
               <option value="17" th:selected="*{cardPeriodYear == 17}">17</option>
               <option value="18" th:selected="*{cardPeriodYear == 18}">18</option>
               <option value="19" th:selected="*{cardPeriodYear == 19}">19</option>
               <option value="20" th:selected="*{cardPeriodYear == 20}">20</option>
               <option value="21" th:selected="*{cardPeriodYear == 21}">21</option>
               <option value="22" th:selected="*{cardPeriodYear == 22}">22</option>
               <option value="23" th:selected="*{cardPeriodYear == 23}">23</option>
               <option value="24" th:selected="*{cardPeriodYear == 24}">24</option>
               <option value="25" th:selected="*{cardPeriodYear == 25}">25</option>
               <option value="26" th:selected="*{cardPeriodYear == 26}">26</option>
               <option value="27" th:selected="*{cardPeriodYear == 27}">27</option>
               <option value="28" th:selected="*{cardPeriodYear == 28}">28</option>
               <option value="29" th:selected="*{cardPeriodYear == 29}">29</option>
               <option value="30" th:selected="*{cardPeriodYear == 30}">30</option>
             </select>

           </dd>
           <dt class="input_title">
             セキュリティコード<span class="comments">(クレジットカードの背面に記載されている3桁の番号)</span>
           </dt>
           <dd class="input_value">
             <input type="text" name="cardSecurityCode"
               th:value="*{cardSecurityCode}" id="cardSecurityCode" />
               <br /><span id="cardSecurityCode_error" class="error_m"></span>

           </dd>

           <dt class="input_title">カード種別</dt>
           <dd class="input_value">
             <select name="cardType" id="cardType">
               <option value="0"></option>
               <option value="1" th:selected="*{cardType == 1}">Master Card</option>

               <option value="2" th:selected="*{cardType == 2}">JCB</option>

               <option value="3" th:selected="*{cardType == 3}">VISA</option>

               <option value="4" th:selected="*{cardType == 4}">DC</option>

               <option value="5" th:selected="*{cardType == 5}">UC</option>
             </select>

             <br /><span id="cardType_error" class="error_m"></span>

           </dd>
         </dl>

    <div th:object="${userBean}">
       <input type="hidden" name="postalCode" th:value="*{postalCode}" />
       <input type="hidden" name="address" th:value="*{address}" /> <input
         type="hidden" name="name" th:value="*{name}" /> <input
         type="hidden" name="phoneNumber" th:value="*{phoneNumber}" />
     </div>
       </div>
       <input type="submit" class="send_button" value="次へ" />
     </form>

     <form method="post" class="update" th:action="@{/address/input/back}" th:object="${userBean}">
      <input type="hidden" name="postalCode" th:value="*{postalCode}" />
       <input type="hidden" name="address" th:value="*{address}" /> <input
         type="hidden" name="name" th:value="*{name}" /> <input
         type="hidden" name="phoneNumber" th:value="*{phoneNumber}" /> <input
         type="submit" value="戻る" class="send_button" />

     </form>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

セレクトボックスで未選択の際にエラーメッセージを表示

required属性つけられているのでそれでも一応チェックは出来てそうですけど、
selectも.val()で値が取得できます。

有効期限が過去の日付だった場合にエラーメッセージを表示

日付の比較ではmoment.jsでの対応が簡単そうに思います。

でなくても「JavaScript 日付 比較」で調べれば結構出てきます

現在日時を取得して入力された日付と比較するだけです(Date()でオブジェクトにしておく必要はありますが)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/22 16:09 編集

    ご回答ありがとうございます。
    知識不足で申し訳ありません。
    自分で書いてみたコードが下記のような感じなのですが、これだと上手く行かず…。

    cardType = document.getElementById("cardType").value;
    if(cardType == 0) {
    $("#cardType_error").html("* カード種別は必須項目です。");
    $("#cardType").addClass("inp_error");
    result = false;
    }

    キャンセル

  • 2019/02/22 16:14

    jQueryとPureJavaScriptを混ぜると分かりづらくなります。
    PureJavaScriptでSELECTの選択値を取得しようと思うとSelectIndexとか色々取得する必要があるのでかなり遠回りになります。

    あと、valueで設定される値は基本的に文字列型です。

    if($("#cardType").val()== "0"){

    キャンセル

  • 2019/02/22 16:31

    ありがとうございますm(__)m
    セレクトボックスのチェックはこちらで完成できました!

    キャンセル

  • 2019/02/22 18:26

    日付の比較の方もですか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る