經過表格驗證，表格不提交

Question

所以我的問題是這樣的。我對我的電子郵件和複選框有一些「驗證」，以檢查它們是否爲空。這似乎工作，但在他們被填寫和檢查後，我仍然得到我的警告消息（.error）彈出式窗體不提交。

我以前只用電子郵件工作，但需要添加協議複選框。

這是代碼和jsfiddle。

謝謝你的幫助！

HTML：

<form class="form" action=""> 
    <div class="wrapper-input email"> 
     <input id="email" type="text" name="email" placeholder="youremailaddress@example.com" /> 
     <button class="form-submit submit">Sign-Up</button> 
     <div class="clear"></div> 
    </div> 
    <div class="clear"></div> 
    <div class="wrapper-input"> 
     <input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span> 

    </div> </form> <div class="modal"> 
    <div class="modal-title"> 
     <h4 class="success">Submission Successful!</h4> 

     <h4 class="error">Submission Error!</h4> 

     <img class="close" src="img/close-x.png" alt="close" /> 
    </div> 
    <div class="modal-content"> 
     <p class="success">Sucess</p> 
     <p class="error">Error!</p> 
    </div> </div> 

的javascript：

$(document).ready(function() { 
    $(".submit").click(function() { 
     var email = $("#email").val(); 
     var dataString = 'email='+ email; 
     var terms = $("input:checkbox#terms").val(); 

     if (!terms.checked) { 
      $('.lk-modal').show(); 
      $('.success').hide(); 
      $('.error').show(); 
     } 

     if (email ==='') { 
      $('.lk-modal').show(); 
       $('.success').hide(); 
      $('.error').show(); 
     } 

     else { 
      $.ajax({ 
      type: "POST", 
      url: "collect.php", 
      data: dataString, 
      success: function(){ 
       $('.lk-modal').show(); 
       $('.success').show(); 
       $('.error').hide(); 
      } 
     }); 
    } 
return false; 
    }); 
}); 

Answer 1

編輯：請看斯特凡諾Dalpiaz先回答，他指出你的錯誤。

---

所有你需要做的檢查一個字符串是空的是這個if (!email)（How do you check for an empty string in JavaScript?）。您也可以使用​​來確定是否選中了複選框。

這裏是工作提琴：http://jsfiddle.net/p28am/1/

HTML：

<form class="form" action=""> 
    <div class="wrapper-input email"> 
     <input id="email" type="text" name="email" placeholder="youremailaddress@example.com" /> 
     <button class="form-submit submit">Sign-Up</button> 
     <div class="clear"></div> 
    </div> 
    <div class="clear"></div> 
    <div class="wrapper-input"> 
     <input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span> 

    </div> 
</form> 
<div class="modal"> 
    <div class="modal-title"> 
     <h4 class="success">Submission Successful!</h4> 

     <h4 class="error">Submission Error!</h4> 

     <img class="close" src="img/close-x.png" alt="close" /> 
    </div> 
    <div class="modal-content"> 
     <p class="success">Sucess</p> 
     <p class="error">Error!</p> 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    $(".submit").click(function() { 
     var email = $("#email").val(); 
     var dataString = 'email=' + email; 
     var terms = $("input:checkbox#terms").is(':checked'); 

     if (!email || !terms) { 
      $('.modal').show(); 
      $('.success').hide(); 
      $('.error').show(); 
     } else { 
      $.ajax({ 
       type: "/echo/json/", 
       url: "collect.php", 
       data: dataString, 
       success: function() { 
        $('.modal').show(); 
        $('.success').show(); 
        $('.error').hide(); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

     $('.close').click(function(e){ 
      e.preventDefault(); 
      $('.modal').hide(); 
     }); 

Answer 2

上有代碼的一些錯誤。對於該複選框，您正在檢查其值的.checked屬性，並且複選框的值是一個字符串。在檢查電子郵件之前，我還添加了一條else聲明。沒有它，即使您沒有選中複選框，該請求也會被髮送。這裏是更新版本：

$(document).ready(function() { 
    $(".submit").click(function() { 
     var email = $("#email").val(); 
     var dataString = 'email=' + email; 
     var terms = $("input:checkbox#terms"); 

     if (!terms.is(":checked")) { 
      $('.modal').show(); 
      $('.success').hide(); 
      $('.error').show(); 
     } 

     else if (email === '') { 
      $('.modal').show(); 
      $('.success').hide(); 
      $('.error').show(); 
     } else { 
      $.ajax({ 
       type: "/echo/json/", 
       url: "collect.php", 
       data: dataString, 
       success: function() { 
        $('.modal').show(); 
        $('.success').show(); 
        $('.error').hide(); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

而這裏是JsFiddle。