2017-03-10 3 views
0

入力フィールドと選択ボックスがある場所でフォーム検証を行っています。パースリー検証は、最初のクリックではfalseを返し、2回目のクリックではtrueを返します。

問題は、送信ボタンをクリックすると、最初のクリックでは検証機能を呼び出せませんが、2回目のクリックでは、検証者が呼び出してtrueを返し、フォームが検証済みのコードを取得できます。

JSコード

function validateOnSubmit(){ 
    $('form[data-validate="parsley"]').each(function() { 

     if($(this).parsley().validate()) { 
      validated = true; 
     } 
    }); 
} 

HTMLコード

   <form id="billPaymentSubmit" name="billPaymentSubmit" data-validate="parsley" autocomplete="off" onkeypress="if(event.keyCode==13) { return false; };" action="" method="POST"> 
              <div class="form-group"> 
               <div class="rows p-n"> 
                <div class="col-lg-12 m-sm" id="quickPayOption"> 
                  <label class="text-xs font-bold"> <span class="">* QUICK PAY OPTIONS 
                  </span> 
                  </label> 
                </div> 
               </div> 
               <div class="rows p-n"> 
                <div class="col-lg-3 checkbox i-checks m-n "> 
                 <label class="radio m-r-lg" for="quickPayOption_J"> 
                 <input id="quickPayOption_J" name="bill.quickPayOpted" class="input-panel" onclick="setQuickPayOption(this)" type="radio" value="0"> 
                   <i></i> 
                 <span class="">JomPay 
                   </span> 
                 </label> 

                </div> 
                <div class="col-lg-6 checkbox i-checks m-n"> 
                 <label class=" radio m-r-lg" for="quickPayOption_O"> 
                  <input id="quickPayOption_O" name="bill.quickPayOpted" class="input-panel" onclick="setQuickPayOption(this)" type="radio" value="1" checked="checked"> <i></i> 
                 <span class="">Other Payments 
                   </span> 
                 <br> 
                 <span class="text-xs">(Other billers - Credit cards/Loans/Mobile prepaid) 
                  </span> 
                 </label> 
                </div> 
                <hr width="100%"> 
                <div class="clearer"></div> 
               </div> 
              </div> 



      <!-- ************************ other payment start *******************--> 

           <div class="form-group" id="otherPaymentDiv"> 
            <div class="rows p-n"> 
                <div class="col-lg-6 cols"> 
                    <div class="m-sm"> 

                   <label class="text-xs font-bold"> <span class="">* BILLING ORGANIZATION 
                   </span> 
                   </label> <br> 
                   <div class="select2-container parsley-validated parsley-success" id="s2id_billerOrg" title="" style="width: 100%;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-2">CELCOM ACCESS mobileReload</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2"></div><select id="billerOrg" name="payeeCode" class="parsley-validated select2-offscreen parsley-success" style="width:100%;" data-required="true" onchange="e2esubmit(true,'/2FA/processEnquiry.do?token=457b352120cef08ac2f32624facff0e6&amp;keyId=0&amp;_p=0&amp;__c=101-50-BA6B010008814303EBBBC6475162EE5A')" title="" tabindex="-1"><option value="" alt="">Select Organisation</option><option value="00000003" selected="selected" alt="CELCOM">CELCOM ACCESS mobileReload</option><option value="00000013" alt="Extra Space Segambut">Extra Space Segambut</option><option value="00000001" alt="MAXI">MAXIS hotlink mobile reload</option><option value="00000026" alt="Mobifon 018">Mobifon 018</option><option value="00000153" alt=" Card Center"> Card Center</option><option value="00000154" alt=" Loans"> Loans</option></select> 

                   <a href="asdf" class="select2-icon"> 
                    <i id="billerlist-ajax" class="-seelist color-icon text-lg"></i> 
                   </a> 

                      <!-- <div id="add-local-error"></div> --> 
                    <div class="errorMsg parsley-error-list hide">This value is required.</div> 
                    </div> 

                </div> 

                <div class="col-lg-6 cols"> 
                 <div class="m-sm"> 

                   <label class="text-xs font-bold"> <span class="">BILLER DESCRIPTION 
                   </span> 
                   </label> <br> 
                   <input id="billerdesc-addbiller-precapture" name="bill.billerDesc" class="form-control parsley-validated parsley-success" readonly="readonly" autocomplete="off" data-required="true" onkeypress="if(event.keyCode == 13){return false;};" type="text" value="CELCOM ACCESS mobileReload"> 

                   <div class="errorMsg parsley-error-list hide">This value is required.</div> 
                 </div> 
                </div> 
                <div class="clearer"></div> 
               </div> 



               <div class="rows m-t-md"> 
                 <div class="col-lg-6"> 

                   <label class="text-xs font-bold"> <span class="">FROM 
                   </span> 
                   </label> <br> 
                   <div> 






                     <select id="fromAccount" name="bill.fromAccount" class="form-control account-select parsley-validated parsley-success" data-required="true"><option value="">Select Account</option><option value="10" selected="selected">Current Acct Normal 248-300-355-4 (MYR) 50,000.00</option><option value="9">Current Acct Normal 248-300-328-7 (MYR) 10,000,000.00</option></select> 


                     <div class="errorMsg parsley-error-list hide">This value is required.</div> 




                  </div> 
                 </div> 
                <div class="col-lg-3"> 

                   <label class="text-xs font-bold"> 
                    <span class="">WHEN 
                    </span> 
                   </label> 

                   <br> 
                   <div class="text-lg"> 
                   10 Mar 2017 
                  </div> 

                </div> 
                <div class="col-lg-3"> 

                  </div> 

                <div class="clearer"></div> 
                 </div> 



               <div class="rows m-t-md m-b-md"> 
                <div class="col-lg-6"> 

                   <label class="text-xs font-bold"> <span class="">AMOUNT 
                    </span> 
                   </label> 
                   <div> 


                     <select id="mobileTopUp" name="bill.billAmount" class="form-control m-b account-select parsley-validated parsley-success" data-required="true"><option value="">Select Amount</option><option value="1">50</option></select> 

                      <div class="errorMsg parsley-error-list hide">This value is required.</div> 



                  </div> 
                 </div> 


                <div class="clearer"></div> 
               </div> 

              <div class="form-group"> 






               </div> 

               <div class="clearer"></div> 

               <div class="row m-t-lg"> 
                <div class="col-lg-6"> 
                 <div class="doc-buttons"> 
                  <button onclick="e2eValidateSubmit(validateOnSubmit(),true,'/2FA/processSubmit.do?token=457b352120cef08ac2f32624facff0e6&amp;keyId=0&amp;_p=0&amp;__c=101-53-BA6B010008814303EBBBC6475162EE5A');return false;" id="btnsubmit" class="btn btn-s-md btn-primary" type="submit" value="Submit"> 
                   <span class="">Continue 
                   </span> 
                  </button> 

                 </div> 
                </div> 
               </div> 

              </div>  






            <div class="clearer"></div>  













       <!-- ************************ other payment end ******************-->     

      </form> 

答えて

0

問題はあなたがカスタム選択ボックスを使用していて、ユーザがクラスのselect2-containerを持つdivをクリックしたとき、パースレイはそれを検証できません。

また、すべてのフィールドを検証する場合は、カウンタを作成する必要があり、すべてのフィールドが検証されるとが真の場合はになります。コードは次のとおりです。 -

  function validateOnSubmit() { 
       var validated = false, 
        count = 0; 

       if($("#quickPayOption_O:checked").length > 0){ 

        $('#otherPaymentDiv').find('.parsley-validated').each(function() { 

         if(!$(this).hasClass("select2-container")){ 
          if($(this).parsley().validate()) { 
           count++; 
          } 

          if(count === $('#otherPaymentDiv .parsley-validated').length -1){ 
           validated = true; 
          } 
         } 

        }); 

        $('#jomPayDiv').find('.parsley-validated').each(function() { 
         $(this).parsley('removeConstraint','required'); 
         flag = true; 
        }); 

        return validated; 
       }; 

     } 
関連する問題