Formular vor Bootstrap modales Popup validieren

Question

in PHP-Datei habe ich einfache Form und Bootstrap modal. Nach dem Klicken auf Submit Button wird Bootstrap Modal angezeigt.

Form ist:

i über Formularfelder validieren müssen. Wenn es Erfolg ist, dann muss ich das modale anzeigen und diese Felder validieren.

Modal ist:

mein Code:

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

Formular Code ist unten gezeigt:

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

ich nicht in der Lage war, sowohl die Form zu validieren und modal. bitte mir zu diesem Thema helfen .. Dank im Voraus

Answer 1

diesen Code Versuchen:

zunächst einen Klick Zuhörer zum Formular anhängen Absenden-Button und das Formular bestätigen, wenn die Schaltfläche geklickt wird und wenn die Validierung erfolgreich ist, dann können Sie zeigen, dein Modal.

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

Schreiben Sie Ihre Validierungslogik in diese Funktion und geben Sie true zurück, wenn die Validierung Tests besteht.

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

Answer 2

Sie können eine einfache Methodenvalidierung schreiben

Ein Beispiel könnte sein ....

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