проверки формы перед тем Submit

Question

У меня есть следующие формы, которая должна подаваться в базу данных, но я хотел бы, чтобы это было подтверждено, прежде чем он может быть сохранен в базе данных:

<form name="add_walkin_patient_form" class="add_walkin_patient_form" id="add_walkin_patient_form" autocomplete="off" > 

       <div class="form-line"> 

        <div class="control-group"> 
         <label class="control-label"> 
          Patient Name 
         </label> 
         <div class="controls"> 
          <input type="text" name="patientname" id="patientname" required="" value=""/> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label"> 
          Patient Phone Number 
         </label> 
         <div class="controls"> 
          <input type="text" name="patient_phone" id="patient_phone" required="" value=""/> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label"> 
          Department 
         </label> 
         <div class="controls"> 
          <select name="department" required="" class="department" id="department"> 
           <option value="">Please select : </option> 
           <option value="Pharmacy">Pharmacy</option> 
           <option value="Laboratory">Laboratory</option> 
           <option value="Nurse">Nurse</option> 

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

       <button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right"> 
        Add Walk In Patient 
       </button> 
      </form> 

И представить делается путем JQuery скрипт, используя следующий скрипт:

<script type="text/javascript"> 

    $(document).ready(function() { 
     //delegated submit handlers for the forms inside the table 
     $('#add_walkin_patient_button').on('click', function (e) { 
      e.preventDefault(); 

      //read the form data ans submit it to someurl 
      $.post('<?php echo base_url() ?>index.php/reception/add_walkin', $('#add_walkin_patient_form').serialize(), function() { 
       //success do something 

       // $.notify("New Patient Added Succesfully", "success",{ position:"left" }); 
       $(".add_walkin_patient_form").notify(
         "New Walkin Patient Added Successfully", 
         "success", 
         {position: "center"} 
       ); 
       setInterval(function() { 
        var url = "<?php echo base_url() ?>index.php/reception/"; 
        $(location).attr('href', url); 
       }, 3000); 


      }).fail(function() { 
       //error do something 
       $(".add_walkin_patient_form").notify(
         "There was an error please try again later or contact the system support desk for assistance", 
         "error", 
         {position: "center"} 
       ); 

      }) 
     }) 

    }); 

</script> 

Как поместить форму проверки, чтобы проверить, если вход пуст перед отправкой его в сценарий?

Answer 1

Вы используете,

<button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right"> 
     Add Walk In Patient 
</button> 

Здесь submit кнопка используется для отправки формы и никогда не будет вызывать нажмите событие. Потому что, отправка будет инициирована первым, в результате чего произойдет событие click.

$('#add_walkin_patient_button').on('click', function (e) { 

Это сработало бы, если вы использовали normal кнопку вместо submit кнопку

<input type="button">Submit</button> 

Теперь к этой проблеме. Есть два решения для этого,

Если вы используете кнопку события, то вы должны вручную запустить подавать на правильном случае проверки,

<input type="button" id="add_walkin_patient_button">Submit</button> 
//JS : 
$("#add_walkin_patient_button").click(function() { 
    if(valid){ 
    $("#form-id").submit(); 
    } 

Другим вариант заключается в использовании submit события, которое запускается только после нажатия кнопки отправить кнопку. Здесь вам необходимо либо разрешить формы или остановить его на основе ваших критериев проверки,

$("#form-id").submit(function(){ 
    if(invalid){ 
    //Suppress form submit 
     return false; 
    }else{ 
     return true; 
    } 
}); 

PS

И я бы порекомендовал вам использовать jQuery Validate как предложено @sherin-mathew