在調用引導程序之前先驗證引導程序模式

Question

我是Modals和jQuery的新手。我需要一些幫助。我有一個表單，我使用的是LiveValidation庫，也有Bootstrap Modal。我使用Modal來顯示錶單中的用戶輸入，並有確認提交按鈕。

當前設置爲。當用戶填寫所有字段時，模態將出現並顯示用戶的輸入並有確認按鈕提交。現在，我添加了驗證，並且出現了一些邏輯錯誤或不正確的代碼安排？

當用戶沒有填滿所有的字段驗證開始（我想要的），但我的莫代爾也出現了。如果點擊Modal內的提交按鈕，它將不會提交，因爲用戶沒有填好表格中的所有字段。

我只想讓我的Modal不顯示，如果所有的字段沒有填寫或驗證。

我在同一時間調用Validation和Modal的表單上提交了按鈕，我知道它是原因。我只需要幫助如何安排或重組我的代碼？

這裏是我的HTML

<!-- Start Form --> 
     <form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm();"> 
     <input type="hidden" name="action" value="add_form" /> 

         <div class="required-field-block"> 
         <label>Last Name</label><span class="label label-danger">*required</span> 
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname"> 
         </div> 

         <div class="form-group"> 
         <label>First Name</label><span class="label label-danger">*required</span> 
         <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname"> 
         </div> 

         <div class="form-group"> 
         <label>Address Information</label> 
         </div> 

         <div class="col-lg-12"> 
          <div class="form-group"> 
           <select class="selectpicker" id="island" name="island" onchange="document.getElementById('island2').value=this.options[this.selectedIndex].text"> 
           <option value="">Choose One</option> 
           <option value="1">Luzon</option> 
           <option value="2">Visayas</option> 
           <option value="3">Mindanao</option> 
           </select> 
           <span class="label label-primary">Island</span><span class="label label-danger">*required</span> 
          </div> 

          <div class="form-group"> 
           <select class="selectpicker" id="region" name="region" onchange="document.getElementById('region2').value=this.options[this.selectedIndex].text" data-live-search="true"> 
            <option value="">Choose One</option> 
           </select> 
           <span class="label label-primary">Region</span><span class="label label-danger">*required</span> 
          </div> 

          <div class="form-group"> 
           <select class="selectpicker" id="province" name="province" onchange="document.getElementById('province2').value=this.options[this.selectedIndex].text" data-live-search="true"> 
            <option value="">Choose One</option> 
           </select> 
           <span class="label label-primary">Province</span><span class="label label-danger">*required</span> 
          </div> 

          <div class="form-group"> 
           <select class="selectpicker" id="city" name="city" onchange="document.getElementById('city2').value=this.options[this.selectedIndex].text" data-live-search="true"> 
            <option value="">Choose One</option> 
           </select> 
           <span class="label label-primary">City</span><span class="label label-danger">*required</span> 
          </div> 

          <div class="form-group"> 
           <select class="selectpicker" id="barangay" name="barangay" onchange="document.getElementById('barangay2').value=this.options[this.selectedIndex].text" data-live-search="true"> 
            <option value="">Choose One</option> 
           </select> 
           <span class="label label-primary">Barangay</span><span class="label label-danger">*required</span> 
          </div> 
         </div> 

         <div class="form-group"> 
         <label>Address</label><span class="label label-danger">*required</span> 
         <input class="form-control" placeholder="Enter Address (ex. 1234 Sample Street)" name="address" id="address"> 
         </div> 

         <div class="form-group"> 
          <select class="selectpicker" id="gender" name="gender"> 
           <option value="">Choose One</option> 
           <option value="Male">Male</option> 
           <option value="Female">Female</option> 
          </select> 
          <span class="label label-primary">Gender</span><span class="label label-danger">*required</span> 
         </div> 


         <div class="form-group"> 
         <label>Birthdate</label><span class="label label-danger">*required</span> 
         <input class="form-control" placeholder="Enter Select Date" name="birthdate" id="birthdate"> 
         </div> 

         <!-- Hidden Fields to Get Island, Region, Province, City, Barangay as String --> 
         <input type="hidden" name="island2" id="island2" /> 
         <input type="hidden" name="region2" id="region2" /> 
         <input type="hidden" name="province2" id="province2" /> 
         <input type="hidden" name="city2" id="city2" /> 
         <input type="hidden" name="barangay2" id="barangay2" /> 
         <input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" onclick="checkInput();";/> 
         <input type="button" name="btn" value="Reset" onclick="window.location='index.php'" class="btn btn-default" data-modal-type="confirm"/> 

         <!-- Start Modal --> 
        <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
         <div class="modal-dialog"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <strong>Confirm Submit</strong> 
            </div> 
            <div class="modal-body"> 
             Are you sure you want to submit the following details? 

             <!-- We display the details entered by the user here --> 
             <table class="table"> 
              <tr> 
               <th>Last Name</th> 
               <td id="modal_lastname"></td> 
              </tr> 
              <tr> 
               <th>First Name</th> 
               <td id="modal_firstname"></td> 
              </tr> 
              <tr> 
               <th>Island</th> 
               <td id="modal_island"></td> 
              </tr> 
              <tr> 
               <th>Region</th> 
               <td id="modal_region"></td> 
              </tr> 
              <tr> 
               <th>Province</th> 
               <td id="modal_province"></td> 
              </tr> 
              <tr> 
               <th>City</th> 
               <td id="modal_city"></td> 
              </tr> 
              <tr> 
               <th>Barangay</th> 
               <td id="modal_barangay"></td> 
              </tr> 
              <tr> 
               <th>Address</th> 
               <td id="modal_address"></td> 
              </tr> 
              <tr> 
               <th>Gender</th> 
               <td id="modal_gender"></td> 
              </tr> 
              <tr> 
               <th>Birthdate</th> 
               <td id="modal_birthdate"></td> 
              </tr> 
             </table> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
             <input type="submit" id="submit" name="btn" value="Submit" class="btn btn-success" /> 
            </div> 
          </div> 
          </div> 
        </div> 
        <!-- End Modal --> 

        </form> 
        <!-- End Form --> 

這裏是我的驗證

<script type="text/javascript"> 
function checkInput() 
{ 
    var lastname = new LiveValidation('lastname', {onlyOnSubmit: true }); 
    lastname.add(Validate.Presence); 
    var firstname = new LiveValidation('firstname', {onlyOnSubmit: true }); 
    firstname.add(Validate.Presence); 
    var island = new LiveValidation('island', {onlyOnSubmit: true }); 
    island.add(Validate.Presence); 
    var region = new LiveValidation('region', {onlyOnSubmit: true }); 
    region.add(Validate.Presence); 
    var province = new LiveValidation('province', {onlyOnSubmit: true }); 
    province.add(Validate.Presence); 
    var city = new LiveValidation('city', {onlyOnSubmit: true }); 
    city.add(Validate.Presence); 
    var barangay = new LiveValidation('barangay', {onlyOnSubmit: true }); 
    barangay.add(Validate.Presence); 
    var address = new LiveValidation('address', {onlyOnSubmit: true }); 
    address.add(Validate.Presence); 
    var gender = new LiveValidation('gender', {onlyOnSubmit: true }); 
    gender.add(Validate.Presence); 
    var birthdate = new LiveValidation('birthdate', {onlyOnSubmit: true }); 
    birthdate.add(Validate.Presence); 

    var automaticOnSubmit = lastname.form.onsubmit; 
    lastname.form.onclick = function(){ 
    var valid = automaticOnSubmit(); 
    if(valid)alert('The form is valid!'); 
    return false; 
    } 
} 

</script> 

這裏只是一個腳本，將得到來自表單的輸入，並將其複製到模式

<script type="text/javascript"> 
/* Get input and show to modal */ 
$('#submitBtn').click(function() { 
/* when the button in the form, display the entered values in the modal */ 
$('#modal_lastname').html($('#lastname').val()); 
$('#modal_firstname').html($('#firstname').val()); 
$('#modal_island').html($('#island2').val()); 
$('#modal_region').html($('#region2').val()); 
$('#modal_province').html($('#province2').val()); 
$('#modal_city').html($('#city2').val()); 
$('#modal_barangay').html($('#barangay2').val()); 
$('#modal_address').html($('#address').val()); 
$('#modal_gender').html($('#gender').val()); 
$('#modal_birthdate').html($('#birthdate').val()); 
}); 

$('#submit').click(function(){ 
    /* when the submit button in the modal is clicked, submit the form */ 
    $('#formfield').submit(); 
}); 
</script> 

Answer 1

你如果您的驗證失敗，則已經返回false，因此您只需在顯示模態之前檢查它（返回tr如果它通過）。不要直接從提交中調用checkInput()，而應調用另一個調用checkInput()的函數。

<input type="button" name="btn" value="Submit" id="submitBtn" class="btn btn-default" onclick="submitForm();";/> 

function submitForm() { 
    var valid = checkInput(); 
    if (valid) { 
     $('#confirm-submit').modal('show'); 
    } 
}