MISE EN FORME FORMULAIRE DE CONTACT

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
ameb@2908
Messages : 3
Enregistré le : 13 août 2023, 16:19

MISE EN FORME FORMULAIRE DE CONTACT

Message par ameb@2908 » 13 août 2023, 16:50

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.

Avatar du membre
webmaster
Administrateur du site
Messages : 562
Enregistré le : 28 févr. 2017, 15:19

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par webmaster » 14 août 2023, 15:30

Bonjour,

Il me faudrait le code HTML du formulaire pour faire des tests plus poussés
A vue de nez, je ne trouve pas
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

ameb@2908
Messages : 3
Enregistré le : 13 août 2023, 16:19

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par ameb@2908 » 15 août 2023, 16:38

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>

Avatar du membre
webmaster
Administrateur du site
Messages : 562
Enregistré le : 28 févr. 2017, 15:19

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par webmaster » 16 août 2023, 11:33

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é
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

ameb@2908
Messages : 3
Enregistré le : 13 août 2023, 16:19

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par ameb@2908 » 16 août 2023, 17:49

Ca ne fonctionne toujours pas.

Avatar du membre
webmaster
Administrateur du site
Messages : 562
Enregistré le : 28 févr. 2017, 15:19

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par webmaster » 17 août 2023, 10:36

J'ai fait le test avec le premier champ user et les couleurs s'alternent correctement :
https://www.toutjavascript.com/user/onsubmit.html
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

elijahnelson
Messages : 1
Enregistré le : 06 nov. 2023, 10:06

Re: MISE EN FORME FORMULAIRE DE CONTACT

Message par elijahnelson » 06 nov. 2023, 10:13

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

Répondre