MISE EN FORME FORMULAIRE DE CONTACT

ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024 - 13 août 2023 à 10:37
jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 - 15 août 2023 à 13:27

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 :

$(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 & bon dimanche.
Windows / Chrome 115.0.0.0

5 réponses

jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
13 août 2023 à 20:43

Bonjour, TU dis : quand je remets un caractère non autorisé dans le champ en question, le texte négatif revient mais la bordure reste verte Mais, recliques tu sur le bouton submit ? Ou tu veux dire que le changement se fait dès que tu écris dans ton champ ? Si c'est ça... cela veut dire que tu as un autre code jquery qui gère ça....


0
ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024
13 août 2023 à 23:07

quand je recliques sur le bouton submit

0
jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
13 août 2023 à 23:24

Je viens de voir que tu fais des addClass. Mais tu as aucun moment tu ne retires la class ( removeClass ) Tu peux aussi regarder la fonction toggle


0
ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024
14 août 2023 à 13:19

J'ai fait un removeClass & toujours pareil.

0
jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
14 août 2023 à 18:28

Sans montrer ton code modifié ... Impossible de te dire ceque tu as mal fait... De pkus, pense à vider complètement le cash de ton navigateur Internet après chaque modification d'un fichier ou d'un code javascript

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024
Modifié le 15 août 2023 à 12:19

J'ai mis removeClass('bgreen') dans chaque if & else if.

0
jordane45 Messages postés 38156 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
15 août 2023 à 13:27

Bonjour Merci de montrer le code complet modifié... De plus, j'insiste, as-tu bien vidé complètement le cash de ton navigateur Internet après avoir modifié le code JavaScript ??

0