驗證克隆表單

Question

我有一個使用jquery克隆的表單。 因為它是克隆的，驗證無法正常工作。

當字段未填寫時，我已設法讓它發出警報，但在清除警報消息后仍然會提交表單。

有任何想法嗎？

代碼如下......

$(document).ready(function(){
   $("ul > li > a").click(function() {
       $popupCopy = $("." + $(this).attr("href")).html();
       $popupAddClass = $(this).attr("href");
       $popupWidth = parseFloat($("." + $(this).attr("href")).attr("title")) + 80;
       $("<div class='popupContainer'><div class='popupContent " + $popupAddClass + "'>" + $popupCopy + "</div><img src='images/close.png' class='closePopup'></div>").appendTo("body");
       $(".popupContainer").fadeIn(500);
       return false;
   });

   $(".giftName").live("focus", function() {
       if ( $(this).val()=="Name") {
            $(this).val('');
       };
   });

   $(".giftName").live("blur", function() {
       if ( $(this).val()=="") {
            $(this).val('Name');
       };
   });

   $('.giftSubmit').live('click', function(){  
       if( ! checkvalid() ) {  
           alert('Need to fill-out all fields')  
       }  
       else {  
           alert('Thanks')  
       }  
   });

});

function checkvalid(){
   var valid = true;
   $('.giftName').each(function(){
       if (this.value == '' || this.value == 'Name' || this.value == null) {
           valid = false;
           return;
       }
   })
   return valid;
}

身體：

<div class="pageContainer">
    <div class="bodyPanel">   
        <ul>
            <li><a href="giftlist">Gift list</a></li>
        </ul>   
    </div>
</div>

<div class="popupsHidden">
    <div class="giftlist">
        <form action="sendGift.php" class="giftForm" method="post">
            <input name="giftName" class="giftName" type="text" value="Name" />
            <input name="" class="giftSubmit" type="submit" value="Send your promised gift..." />
        </form>
    </div>
</div>

Answer 1

而不是在提交按鈕上偵聽click事件，嘗試在表單上列出submit事件：

$('.giftForm').live('submit', function() {
    if ( ! checkValid() ) {
        alert('not valid !');
        return false;
    }
});

Answer 2

在你的$('.giftSubmit').live('click' ...函數中，你需要添加return false;顯示你的驗證失敗消息。這將阻止事件傳播。

由於未停止點擊事件，因此即使驗證失敗，也會提交表單。