Проверка jQuery, противоречащая вызову AJAX

Question

У меня есть форма с довольно простым фрагментом проверки, а также простой вызов AJAX, за исключением случаев, когда я пытаюсь соединить эти два вопроса. Я столкнулся с проблемами. Если я поставлю фрагмент проверки перед вызовом AJAX , то проверка выполняется, но вызов AJAX просто не отправляется. Если я поставил вызов AJAX перед проверкой, работает AJAX-вызов, а проверка - нет. Я действительно потерялся и стучал головой в течение часов над . Любая помощь очень ценится!

$("#headerForm").submit(function(){ 

    var validate = true;  
    $("#headerForm :input").each(function(){     
     var $this = $(this);       
     if(this.id == "phoneNumber" && $this.val().length < 10){  
      alert("Please enter a valid phone number"); 
      validate = false; 
      return false;   
     } else if(!this.value.length){   
      alert("field is required"); 
      validate = false; 
      return false; 
     }   
    }); 
    return validate; 

var name = $("#name").val(); 
    var phone = $("#phone").val(); 

    var dataString = 'name='+ name + '&phone=' + phone; 

    $.ajax({ 
     type: "POST", 
     url: "/bin/headerForm", 
     data: dataString, 
     success: function() { 
     $('#headerForm').html("<div id='message'>Thank you</div>"); 
     } 
    }); 
    return false; 
}); 

Answer 1

Лучше всего было бы, чтобы переместить код проверки в функцию, а затем вызвать его представить обработчик:

function validateForm() { 
    var validate = true; 
    $("#headerForm :input").each(function() { 
     var $this = $(this); 
     if (this.id == "phoneNumber" && $this.val().length < 10) { 
      alert("Please enter a valid phone number"); 
      validate = false; 
      return false; 
     } else if (!this.value.length) { 
      alert("field is required"); 
      validate = false; 
      return false; 
     } 
    }); 
    return validate; 
} 

Затем представить обработчик:

$("#headerForm").submit(function() { 

    if (validateForm()) { 
     var name = $("#name").val(); 
     var phone = $("#phone").val(); 

     var dataString = 'name=' + name + '&phone=' + phone; 

     $.ajax({ 
      type: "POST", 
      url: "/bin/headerForm", 
      data: dataString, 
      success: function() { 
       $('#headerForm').html("<div id='message'>Thank you</div>"); 
      } 
     }); 
    } 
    return false; 
});