Как проверить модальную форму всплывающей перед представлением

Question

У меня есть HTML-код, как этот

HTML:

<form id="online_booking" method="POST" action="book.php" name="former"> 
    <div id="book_form"> 
     <p> 
      <label for="z_name">Name:<span class="red"> *</span></label> 
      <input type="text" placeholder="ENTER NAME.." name="z_name" required> 
     </p> 

    <p> 
      <label for="z_email">EMAIL:<span class="red"> *</span></label> 
      <input type="email" placeholder="ENTER EMAIL.." name="z_email" required> 
     </p> 

     <p> 
      <label for="z_subject">PHONE:<span class="red"> *</span> </label> 
      <input type="tel" placeholder="ENTER PHONE.." name="z_subject" required> 
     </p> 

</form> 

и JQuery:

$(document).ready(function() { 
    $('#book_form').dialog({ 
     autoOpen: true, 
     height: 375, 
     width: 350, 
     modal: true, 
     buttons: [ 
      { 
      text: "Cancel", 
      click: function() { 
       $(this).dialog("close"); 
      }}, 
     { 
      text: "Submit", 
      click: function() { 

       $('#online_booking').submit(); 
      }} 
     ] 
    }); 

}); 

Как можно проверить в HTML поле как есть нет кнопки отправки в форме? В код jQuery я создал 2 кнопки (отменил & submit), но не знаю, как бы я прекратил отправку формы, если поля HTML неправильно введены.

Answer 1

Это один простой пример, но работает, если вы просто проверка заготовок:

  $(document).ready(function() { 
       $('#book_form').dialog({ 
        autoOpen: true, 
        height: 375, 
        width: 350, 
        modal: true, 
        buttons: [ 
         { 
          text: "Cancel", 
          click: function() { 
           $(this).dialog("close"); 
          } 
         }, 
        { 
         text: "Submit", 
         click: function() { 
          if (valid()) { //Check for Valid 
           $('#online_booking').submit(); 
          } 
          else { 
           alert("Invalid"); 
          } 
         } 
        } 
        ] 
       }); 

      }); 
      var valid = function() { //Validation Function - Sample, just checks for empty fields 
       var valid; 
       $("input").each(function() { 
        if ($(this).val() === "") { 
         var a = $(this).val(); 
         valid = false; 
        } 
       }); 
       if (valid !== false) { 
        return true; 
       } 
       else { 
        return false; 
       } 
      } 

Answer 2

Вы бы просто изменить вашу click функцию, как так, создав собственную функцию проверки, которая возвращает true или false:

click: function() 
{ 
    if (someValidationFunction()) 
     $('#online_booking').submit(); 
}