ブートストラップモーダルポップアップの前にフォームを検証

Question

私は簡単なフォームとブートストラップモーダルを持っています。送信ボタンをクリックすると、ブートストラップモーダルが表示されます。

形式は次のとおりです。私は、フォームフィールドの上に検証する必要がある

。それが成功する場合は、私はモーダルを表示し、それらのフィールドを検証する必要があります。

モーダルである：

私のコードは次のとおり

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
       <h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="main-login pop-up-form"> 
         <form class="" method="post" action="#"><br> 

          <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
             <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> 
             <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
             <input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span> 
             <input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/> 
            </div> 
           </div> 
          </div> 



          <div class="form-group "> 
           <a href="#" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button">CLICK For Enquiry</a> 
          </div> 

         </form> 
        </div> 

      </div> 
      <div class="modal-footer"> 
       <div class="btn-group btn-group-justified" role="group" aria-label="group button"> 
        <div class="btn-group" role="group"> 
         <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> 
        </div> 
        <div class="btn-group btn-delete hidden" role="group"> 
         <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

フォームコードを以下に示している：

      <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span> 
             <input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" /> 
            </div> 
           </div> 
          </div> 


          <div class="form-group"> 
           <div class="cols-sm-10 food"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
             <select name="ftime" id="ftime"> 
              <option value="">---Select---</option> 
              <option value="1">Breakfast</option> 
              <option value="2">Lunch</option> 
              <option value="3">Dinner</option> 
             </select> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="cols-sm-10 food"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> 
             <select id="ftype" name="ftype" onchange="validate()"> 
              <option value="">--select--</option> 
              <option value="hai">V</option> 
              <option value="hai">NV</option> 
             </select> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="cols-sm-10"> 
            <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span> 
             <input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" /> 
            </div> 
           </div> 
          </div> 


          <div class="form-group "> 
           <a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick=" 
           validate2()">Submit</a> 
          </div> 

         </form> 

iはフォームの両方を検証することができませんでしたモーダルです。

まず送信ボタンをフォームにクリックリスナーを添付して、ボタンがクリックされており、検証が成功した場合、あなたが見ることができますときに、フォームを検証：事前

Answer 1

で おかげで、このコードを試してみてください。これで私を助けてくださいあなたのモーダル

$(document).on('click', '#submit', function(e){ 
     e.preventDefault(); 
     var validated = validateform(); 
     if(validated){ 
      $('#modal').modal('show'); 
     } 
    }); 

検証ロジックをこの関数内に記述し、検証がテストに合格する場合はtrueを返します。

function validateform(){ 
     // logic for form validation 
     // return true if validated successfully 
    } 

Answer 2

あなたは簡単な検証方法

の例では、可能性を書くことができます....あなたがこれまでに試してみました何

function checkValidation() 
{ 
    var isValid = true; 
    if($("#date").val() == null){ 
     isValid = false; 
    } 
    if($("#person").val() == null){ 
     isValid = false; 
    } 
    if($("#mail").val() == null){ 
     isValid = false; 
    } 
    return isValid; 
} 
if(checkValidation()) 
    $("#modalDialog").show(); 
else 
    alert("Form is not valid");