jQuery Valider Plugin Erreur CSS

J'aimerais/changement de la police de l'étiquette de couleur ROUGE en cas d'erreur ou de l'ombre de l'élément de zone de texte rouge. Le CSS que j'utilise ne fonctionne pas pour moi et ne savez pas comment changer l'étiquette de la radio/zone de texte à la place si l'étiquette d'erreur qui est ajouté par le valider plugin.

//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;
}

InformationsquelleAutor Phill Pafford | 2010-10-08

css jquery-validate

4

Vous pourriez envelopper chaque label - input combo dans un div et ensuite utiliser le haut- 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 Démo ici.

Espérons que cette aide !
- hmm pas de travail, dans firebug dit 'élément.les frères et sœurs("label").addClass("erreur"); " et non en fonction
- Ooopsie, mon mauvais. J'ai mis à jour le clou/unhighlight partie dans le script jQuery.
- cette juste brouille les éléments de l'endroit, rien n'est affiché
- C'est le cas, mes excuses. J'ai mis à jour de nouveau le code, et j'ai également ajouté un travail JSFiddle démo.
- Fonctionne grâce génial!!! juste une question. Comment puis-je obtenir une alerte popup après la soumission est acceptée?
- Eh bien, à moins que vous soumettez le formulaire sur AJAX, je ne recommanderais pas d'avoir un dialogue d'alerte lors de la soumission, parce que cela va verrouiller le navigateur et le formulaire ne sera pas réellement être soumis jusqu'à ce que l'utilisateur clique sur OK. Au lieu de cela, je pense que vous serait mieux si vous imprimez un message de remerciement sur la page suivante. Néanmoins, si vous regardez mon JSFiddle démo, j'ai utilisé submitHandler pour remplacer le comportement par défaut et afficher un message d'alerte au lieu de soumettre le formulaire.
- Génial! Ce totalement de m'avoir aidé à ce que je voulais faire!
InformationsquelleAutor Valentin Flachsel

J'ai vraiment travaillé de la façon 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; }

InformationsquelleAutor Rick

Vous devez vous connecter pour publier un commentaire.