通过jquery ajax doens't work验证表单

Question

我写了一个函数，它应该实际验证表单数据。它会检查每个输入是否有值，以及电子邮件格式是否正确。当一切都很好时，它应该提交该表格并通过php发送。这是在Ajax中完成的，因为我不想刷新页面。此外，提交按钮应该在表单发送时更改其值。

，这里是我的jsfiddle，因为它是很多代码： http://jsfiddle.net/qY6uu/

<form id="form" method="POST"> 
     <input type="text" class="" name="name" placeholder="Bitte verrate uns Deinen Namen." id="anfrage-name"/> 
     <input type="email" class="" name="email" placeholder="Und nun Deine E-Mail-Adresse..." id="anfrage-email"/> 
     <textarea name="message" class="" placeholder="...gefolgt von Deiner Nachricht an uns." rows="6" id="anfrage-kaufen"></textarea> 
     <span id="error-message"></span> 
     <input type="submit" class="send-button" value="Anfragen" id="anfrage-abschicken"/> 
    </form> 

，在这里我的jQuery

$(document).ready(function() { 
    var form = $('#form'); // contact form 
    var submit_button = $('#anfrage-abschicken'); // submit button 
    var error = $('#error-message'); // alert div for show alert message 

    // form submit event 
    $('#anfrage-abschicken').click(function() { 
     var sEmail = $('#anfrage-email').val(); 
     var sName = $('#anfrage-name').val(); 
     var sMessage = $('#anfrage-kaufen').val(); 

     //if nothing is in 
     if ($.trim(sMessage).length == 0 && $.trim(sName).length == 0 && $.trim(sEmail).length == 0){ 
      $('#error-message').text('Alle Felder müssen ausgefüllt werden.'); 
      return false; 
     } 

     //no name 
     else if ($.trim(sName).length == 0) { 
      $('#error-message').text('Bitte verrate uns Deinen Namen.'); 
      $('#anfrage-name').focus(); 
      return false; 
     } 

     //no email 
     else if ($.trim(sEmail).length == 0) { 
      $('#error-message').text('Deine E-Mail-Adresse musst Du angeben, damit wir Dir anworten können.'); 
      $('#anfrage-email').focus(); 
      return false; 
     } 

     //No message 
     else if ($.trim(sMessage).length == 0) { 
      $('#error-message').text('Eine Nachricht musst Du uns schon hinterlassen.'); 
      $('#anfrage-kaufen').focus(); 
      return false; 
     } 

     //if everything is right (name, message, email, email format) 
     else if (validateEmail(sEmail) && $.trim(sMessage).length > 0 && $.trim(sName).length > 0 && $.trim(sEmail).length > 0) { 
      $.ajax({ 
       url: '', // form action url 
       type: 'POST', // form submit method get/post 
       dataType: 'html', // request type html/json/xml 
       data: form.serialize(), // serialize form data 
       beforeSend: function() { 
        error.fadeOut(); 
        submit_button.html('Sending....'); // change submit button text 
       }, 
       success: function(data) { 
        error.html(data).fadeIn(); // fade in response data 
        form.trigger('reset'); // reset form 
        submit_button.html('Send Email'); // reset submit button text 
       }, 
       error: function(e) { 
        console.log(e) 
       } 
      }); 
     } 

     //wroong email format 
     else { 
      $('#error-message').text('Dein E-Mail-Format stimmt nicht.'); 
      $('#anfrage-email').focus(); 
      return false; 
     } 
    }); 
}); 

//function for validating email format 
function validateEmail(sEmail) { 
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
    if (filter.test(sEmail)) { 
     return true; 
    } 
    else { 
     return false; 
    } 
} 

Answer 1

按钮值需要改变而不是HTML。您需要更改val()。

更改：

submit_button.html('Send Email'); 

到：

submit_button.val('Send Email'); 

你需要防止表单提交的违约event.preventDefault()
Demo

Answer 2

你的按钮是一个提交按钮。所以每当你点击提交按钮它获得子mitted。它不会等待JavaScript代码被执行。

更改您的提交按钮按钮类别，而不是提交类型像

<input type="button" class="send-button" value="Anfragen" id="anfrage-abschicken"/> 

然后点击按钮将不会触发表单提交。然后点击你的JavaScript代码将编码的按钮将被执行。