Jquery .parent aller trop loin dans DOM

Question

J'essaie de créer un script de vérification d'erreur de formulaire de contact dynamique ... tout fonctionne bien sauf quand j'essaie de changer la classe de l'élément html directement au-dessus d'un champ de saisie mon code ..here:

<div class="container"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <h4>Address:</h4> 
         <address> 
          <p> 
           Plot 12<br> 
           Ogudu Phase 2 <br> 
           Ogudu Lagos <br> 
           <a href="mailto:marketing@businessplusng.com">marketing@businessplusng.com</a> 
          </p> 
         </address> 
        </div> 
        <form method="post" id="contactform" class="form-minimal"> 
         <div class="col-sm-4"> 
          <div class="form-group"> 
           <label for="name">Name</label> 
           <input type="text" class="form-control" name="name" id="name" placeholder="Enter name" title="Please enter your name (at least 2 characters)"/> 
           <div class="form-line"></div> 
          </div> 

          <div class="form-group"> 
           <label for="email">Email</label> 
           <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" title="Please enter a valid email address"/> 
           <div class="form-line"></div> 
          </div> 

          <div class="form-group"> 
           <label for="phone">Phone</label> 
           <input name="phone" class="form-control required digits" type="tel" id="phone" size="30" value="" placeholder="Enter email phone" title="Please enter a valid phone number (at least 10 characters)"> 
           <div class="form-line"></div> 
          </div> 

         </div> 
         <div class="col-sm-4"> 
          <div class="form-group"> 
           <label for="comments">Your Brief</label> 
           <textarea name="comment" class="form-control" id="comments" cols="3" rows="5" placeholder="Enter your message…" title="Please enter your message (at least 10 characters)"></textarea> 
           <div class="form-line"></div> 
          </div> 


         </div>       
         <div class="col-md-8 col-md-offset-4"> 
          <button name="submit" type="submit" class="btn large primary" id="submit"> Submit</button> 
          <div class="result"></div> 
         </div> 
        </form> 

et voici mon code javascript

var form = $("#contactform"); 
var submit= $("#submit"); 
var name =$("#name"); 
var email =$("#email"); 
var comments =$("#comments"); 
form.submit(function(e) { 
    e.preventDefault(); 
if($("input#name").val().length < 10) 
    { 
     $(this).parent(".form-group").addClass("has-error"); 
    } 
    else 
    { 
     submit.addClass("disabled").html("Please wait"); 
     $.post("email.php",form.serialize(),"text") 
     .done(function(data){ 
      submit.removeClass("disabled").html("Mail Sent"); 
      alert(data); 
     }) 
     .fail(function(data) 
     { submit.removeClass("disabled").html("Mail Failed"); 
     }); 
    } 
}); 

donc en gros quand je l'appelle .parent() addClass() ... il va tout le chemin jusqu'à la. row div au-dessus de la colonne d'adresse ... comment puis-je corriger cela pour aller directement au-dessus de l'élément d'entrée name (c'est-à-dire le div du groupe de formulaire parent)

toute aide est grandement appréciée

Answer 1

Le $(this) vous faites référence sous la forme de soumettre fonction est la forme $("#contactform") elle-même, et non le $("input#name"). Ainsi, $(this).parent() fait référence au <div class="row">.

Une façon d'obtenir ce que vous voulez faire est $(this).find("input#name").parent(".form-group").addClass("has-error");