MISE EN FORME FORMULAIRE DE CONTACT

ameb2908 Messages postés 93 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -

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

A voir également:

5 réponses

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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 93 Date d'inscription   Statut Membre Dernière intervention   1
 

quand je recliques sur le bouton submit

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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 93 Date d'inscription   Statut Membre Dernière intervention   1
 

J'ai fait un removeClass & toujours pareil.

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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 93 Date d'inscription   Statut Membre Dernière intervention   1
 

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

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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