Validation sur une forme clonée

Question

J'ai une forme qui est clonée en utilisant jquery. Parce qu'il est cloné, la validation ne fonctionne pas correctement.

J'ai réussi à le faire donner une alerte lorsque le champ n'est pas rempli, mais il soumet toujours le formulaire après que le message d'alerte est effacé.

Des idées?

code ci-dessous ...

$(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; 
} 

corps:

<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

Au lieu d'écouter l'événement click sur le bouton soumettre, essayez la liste pour l'événement submit sur la forme elle-même:

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

Answer 2

Dans votre $('.giftSubmit').live('click' ... fonction, vous devez ajouter return false; après avoir affiché votre message d'échec de validation. Cela empêchera la propagation de l'événement.

Étant donné que l'événement click n'est pas arrêté, le formulaire est soumis malgré l'échec de la validation.