引导模式弹出之前验证表格

Question

在php文件中我有简单的窗体和引导模态。点击提交按钮后，将显示引导模式。

形式是：

我需要验证上述表单字段。如果它是成功的，那么我需要显示模态并验证这些字段。

模态是：

我的代码是：

<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> 

我无法验证这两种形式和模态。请帮我在这.. 在此先感谢

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");