驗證克隆表格

我有一個使用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>

來源

2011-09-02 Tom

如何克隆表單？ – arnaud576875

看到我的jQuery的前幾行... – Tom

Fyi，而不是onfocus代碼，你可以使用HTML5的'placeholder =「sometext」'屬性。它甚至支持所有現代瀏覽器。 – ThiefMaster

相反監聽click事件提交按鈕的，嘗試的形式，本身的submit事件列表：

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

來源

2011-09-02 22:46:17 arnaud576875

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

因爲點擊事件沒有被停止，所以即使驗證失敗，表單也被提交。

來源

2011-09-02 22:53:58 counsellorben

驗證克隆表格

回答

相關問題