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

[jesse99]

Instead of separate `bred` and `bgreen` classes, you can use a single class like `error` for all invalid fields. Add the class on failure and remove it only when all validations pass. Buckshot Roulette

Code : Tout sélectionner

if (!$('#username').val().match(/^[a-z|\s]{2,25}$/)) {
  $('#username').addClass('error');
  $('#username_error').text('Lowercase letters and a maximum of 25 characters are only allowed!')
    .addClass('error_text');

  result = false;
} else {
  $('#username').removeClass('error');
  $('#username_error').text('');
}

// Repeat for other fields

if (result) {
  $('.error').removeClass('error'); // Remove error class from all elements
}

[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