jQuery Valider l'erreur du plugin CSS

Question

Je voudrais changer la couleur de police de l'étiquette en ROUGE en cas d'erreur ou ombrer l'élément de la zone de texte en rouge. Le CSS que j'utilise ne fonctionne pas pour moi et je ne sais pas comment changer l'étiquette de la radio/textbox à la place si l'erreur d'étiquette est ajoutée par le plugin validate.

// HTML

<form id="form1" name="form1" class="form1" method="post" >  
    <label for="gender"> 
     Gender       
    </label> 

    <input type="radio" name="gender" value="female" id="gender_0" /> 
     Female 
    </input> 
    <br /> 

    <input type="radio" name="gender" value="male" id="gender_1" /> 
     Male 
    </input> 
     <br /> 

     <label for="name">Name</label>      
     <input type="text" name="name" id="name" /> 
    <br /><br /> 

    <input type="submit" name="Submit" value="Submit" /> 
</form> 

// JS

$().ready(function() { 

    $("#form1").validate({ 
     rules: { 
      gender: "required", 
         name: "required" 
     }, 
     messages: { 
      gender: "Please select an option", 
         name: "Please enter your name" 
     } 
    }); 
}); 

// CSS

#form1 label.error { 
    margin-left: 10px; 
    width: auto; 
    display: inline; 
} 

Answer 1

Vous pouvez envelopper chaque label - combo input dans un div puis utilisez le haut -en highlight Fonction:

HTML

<form id="form1" name="form1" class="form1" method="post" > 
    <div>  
     <label for="gender">Gender</label> 
     <br /><input type="radio" name="gender" value="female" id="gender_0" />Female 
     <br /><input type="radio" name="gender" value="male" id="gender_1" />Male 
    </div> 
    <div> 
     <label for="name">Name</label>      
     <input type="text" name="name" id="name" /> 
    </div> 

    <br /><br /> 
    <input type="submit" name="Submit" value="Submit" /> 
</form> 

jQuery

$("#form1").validate({ 
    rules: { 
     gender: "required", 
     name: "required" 
    }, 
    messages: { 
     gender: " - Please select gender", 
     name: " - Please enter your name" 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     element.siblings("label").append(error); 
    }, 
    highlight: function(element) { 
     $(element).siblings("label").addClass("error"); 
    }, 
    unhighlight: function(element) { 
     $(element).siblings("label").removeClass("error"); 
    } 
}); 

CSS - l'erreur/highlight classe

.error { 
    color: red; 
} 

JSFiddle Demo here.

Espérons que cela aide!

Answer 2

J'ai vraiment travaillé de la manière suivante

HTML

<div class="control-group"> 
    <label for="name" class="control-label"> 
      Name:<em>*</em></label> 
    <div class="controls"> 
      <input type="text" id="name"></div> 
</div> 

Jquery

$("#form1").validate({ 
rules: { 
    gender: "required", 
    name: "required" 
}, 
messages: { 
    gender: " - Please select gender", 
    name: " - Please enter your name" 
}, 
errorElement: "span", 
errorPlacement: function(error, element) { 
    element.siblings("label").append(error); 
}, 
highlight: function(element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function(element) { 
      element 
      .text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('success'); 
     } 

});

CSS

.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: #b94a48;} 
.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } 
.control-group.success input, .control-group.success select, .control-group.success textarea { border-color: #468847; } 
.control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; }