MISE EN FORME FORMULAIRE DE CONTACT

[ameb@2908]

Bonjour, j'ai un soucis de mise en forme en jQuery. j'ai une bordure en rouge tant que le champ n'est pas correcte avec une réponse négative sinon bordure verte.

Mais quand je remets un caractère non autorisé dans le champ en question,

le texte négatif revient mais la bordure reste verte.

Voici mon code :

Code : Tout sélectionner

$(document).ready(function() {

    $('#submit').click(function(event) {

        event.preventDefault();

        let result = true;

        if($('#username').val() == '') {
            
            $('#username').addClass('bred');
            $('#username_error').text('Veuillez remplir votre nom !').addClass('error_text');

            result = false;
        }
        else if(!$('#username').val().match(/^[a-z|\s]{2,25}$/)) {

            $('#username').addClass('bred');
            $('#username_error').text('Les lettres minuscules et un maximum de 25 caractères sont seulement autorisées !')
                                .addClass('error_text');

            result = false;
        }
        else {

            $('#username').addClass('bgreen');
            $('#username_error').text('');
        }

        if(!$('#usermail').val().match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,3}$/)) {

            $('#usermail').addClass('bred');
            $('#usermail_error').text('Merci d\'entrer une adresse email valide !').addClass('error_text');
            
            result = false;
        }
        else {

            $('#usermail').addClass('bgreen');
            $('#usermail_error').text('');
        }

        if($('#title_message').val() == '') {

            $('#title_message').addClass('bred');
            $('#title_message_error').text('Veuillez remplir le sujet de votre message !').addClass('error_text');

            result = false;
        }
        else if(!$('#title_message').val().match(/^[a-zA-Z0-9|\s]{1,50}$/)) {

            $('#title_message').addClass('bred');
            $('#title_message_error').text('a-zA-Z0-9 sont autorisées et un maximum de 50 caractères sont seulement autorisées !').addClass('error_text');

            result = false;
        }
        else {

            $('#title_message').addClass('bgreen');
            $('#title_message_error').text('');
        }

        if($('#message').val() == '') {
            
            $('#message').addClass('bred');
            $('#message_error').text('Veuillez remplir votre message !').addClass('error_text');

            result = false;
        }
        else if(!$('#message').val().match(/^[a-zA-Z0-9|\s]{1,500}$/)) {

            $('#message').addClass('bred');
            $('#message_error').text('a-zA-Z0-9 sont autorisées et un maximum de 500 caractères sont seulement autorisées !').addClass('error_text');

            result = false;
        }
        else {

            $('#message').addClass('bgreen');
            $('#message_error').text('');
        }

        return result;
    });
});

Merci pour votre aide & bonne fin de journée.

[webmaster]

Bonjour,

Il me faudrait le code HTML du formulaire pour faire des tests plus poussés
A vue de nez, je ne trouve pas

[ameb@2908]

Code : Tout sélectionner

<form action="" method="post">
                        <input type="text" name="username_form" id="username" placeholder="Votre nom">
                        
                        <div id="username_error"></div>
                        
                        <input type="email" name="usermail_form" id="usermail" placeholder="Votre e-mail">

                        <div id="usermail_error"></div>

                        <input type="text" name="title_message_form" id="title_message" placeholder="Sujet">

                        <div id="title_message_error"></div>

                        <textarea name="message_form" id="message" placeholder="Message"></textarea>

                        <div id="message_error"></div>

                        <input type="submit" value="Envoyer le message" name="submit_form" id="submit">
                    </form>

[webmaster]

Bonjour,

Il faut enlever la classe bgreen et rajouter bred

Code : Tout sélectionner

$('#username').removeClass("bgreen").addClass('bred');

Et inversement quand le test de controle est validé

[ameb@2908]

Ca ne fonctionne toujours pas.

[webmaster]

J'ai fait le test avec le premier champ user et les couleurs s'alternent correctement :
https://www.toutjavascript.com/user/onsubmit.html

[elijahnelson]

Le problème réside dans la façon dont vous gérez les classes CSS. Pour que la bordure reflète l'état actuel du champ, vous devez supprimer les classes non pertinentes lorsque l'état du champ changedriving directions

[NadiaEira]

Vous pouvez appliquer une seule classe, telle que « erreur », à tous les champs invalides. Ajoutez la classe lorsqu'une validation échoue et supprimez-la uniquement lorsque toutes les validations réussissent skibidi toilet game