web-dev-qa-db-fra.com

errorClass dans jquery validate plugin?

J'utilise jquery validate plugin dans mon application Web pour valider les formulaires pour les validations vierges et autres simples.

J'utilise le code ci-dessous pour configurer le plug-in jquery validate de mon formulaire. Il contient une option erroClass, où j'ai défini un nom de classe CSS authError que je souhaite appliquer aux messages d'erreur, mais qui applique la même classe à la zone INPUT. Eh bien, je ne veux pas l'appliquer dans la zone INPUT, je le veux juste pour le message d'erreur. S'il vous plaît vérifier et aider. Merci!

$("#frmSignin").validate({
    debug: false,
    errorClass: "authError",
    errorElement: "span",
    rules: {
        username: {
            required: true,
            minlength: 10
        },
        password: {
            required: true  
        }
    },
    messages: {
        username: {
            required: "Please enter your username"
        },
        password: {
            required: "Please enter your password"
        }
    }
});
javascriptjqueryvalidation
15
Prashant

Merci pour les astuces les gars, mais j'ai plutôt trouvé un meilleur moyen en utilisant le code jQuery uniquement. Il existe un événement highlight dans le plug-in validate qui est appelé en cas d'erreur pour mettre en surbrillance les champs d'erreur. Je viens de supprimer l'élément de formulaire de classe lorsque cet événement est appelé. 

$("#frmSignin").validate({
    debug: false,
    errorClass: "authError",
    errorElement: "span",
    rules: {
        username: {
            required: true,
            minlength: 10
        },
        password: {
            required: true  
        }
    },
    messages: {
        username: {
            required: "Please enter your username"
        },
        password: {
            required: "Please enter your password"
        }
    },
    highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }
});
25
Prashant

En fait, vous devriez simplement définir différentes classes pour les entrées et les span ( span puisque errorElement est défini sur span, sinon ce sera label ) plutôt que de supprimer la classe appliquée.

par exemple.

span.authError {color: red;}

input.authError {bordure: 1px pointillé en rouge;}

et pas seulement .authError {} qui sera appliqué à la fois à input et span

5
fozylet
    $("#borrowerForm").validate({
        errorElement: 'span',
        errorElementClass: 'input-validation-error',
        errorClass: 'field-validation-error',
        errorPlacement: function(error, element) {},
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(this.settings.errorElementClass).removeClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(this.settings.errorElementClass).removeClass(errorClass);
        },
        onkeyup: false,
        errorPlacement: function (error, element) { error.insertAfter(element); }
    });
4
Alexander

Dans le plug-in de validation jQuery, la variable errorClass est appliquée à l'élément de message d'erreur (généralement un <label>, mais un <span> dans votre cas) et à l'élément validé lui-même. Puisque vous voulez seulement styler l'élément de message d'erreur, vous devriez écrire:

span.authError {
    // Your error element style.
}
2
Frédéric Hamidi

Vérifie ça:

jQuery.validator.messages.required = "";
$('#frm-contact').validate({
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted below'
                    : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.error span").html(message);
            $("div.error").show();
        } else {
            $("div.error").hide();
        }
    },
    onkeyup: false,
    submitHandler: function () {
        $("div.error").hide();
        alert("submit! use link below to go to the other step");
    },
    highlight: function (element, required) {
        $(element).fadeOut(function () {
            $(element).fadeIn();
            $(element).css('border', '2px solid #FDADAF');
        });
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).css('border', '1px solid #CCC');
    }
});
0
Elshan

Si vous voulez donner css pour le message d'erreur. Au lieu d'utiliser errorClass, définissez la règle css 

label.error
0
Vivek Goel