Bien le bonsoir chère communauté ! :')

C'est l'un de ms premiers post's dans la section Javascript, donc ne soyez pas trop indulgents lol.

Bon, assez parler... Je m'explique,

Je me suis mis à jQuery depuis peu et je me suis créer un petit formulaire en htm/css via mon application MvC (PhP).

Je vous montre déjà mon code pour que je puisse vous en parler un maximum.

	(function($){
		var username = $('#username');
		var emailAdress = $('#emailAdress');
		var subForm = $('#_buttonSubForm');
		var field = $('._inputControl');
		var errorLine = $('._legendError-Text');

		subForm.click(function(e){
			// On annule l'action par défaut
			e.preventDefault();
			if(username.val() == "") {
				username.css({
					borderColor: 'red',
					color: 'red',
					boxShadow: '0 0 8px red'
				});
				username.next(errorLine).css({visibility: "visible", opacity: "1"}).show().html("<p class='_legendError-Text'>Vous devez renseigner un nom d'utilisateur.</p>");
			}
			if(emailAdress.val() == "") {
				emailAdress.css({
					borderColor: 'red',
					color: 'red',
					boxShadow: '0 0 8px red'
				});
				emailAdress.next(errorLine).css({visibility: "visible", opacity: "1"}).show().html("<p class='_legendError-Text'>Vous devez renseigner une adresse email.</p>");
			}
		});

Comme vous le voyez ci-dessus, je vérifie comme tel : 

• J'annule l'action par défaut en faisant un preventDefault() de l'évènement.
• Attribution des variables correspondant à mes différents champs.
• J'écoute l'évènement du clic sur le bouton "M'inscrire".
• Je vérifie que le nom de l'uilisateur ne soit pas vide en utilisant l'attribut : .val() .
• Je vérifie que l'adresse email ne soit pas vide en utilisant l'attribut : .val() .

Comme cité dans le titre plus haut, j'aurais souhaité savoir si il y aurait une solution pour raccourci mon code un maximum. En effet je suis jsute au tout début de ce script en jQuery, mais une fois fini, j'aurais quand meme six champs : 

• Nom d'utilisateur
• Adresse email
• Mot de passe
• Mot de passe (confirmation)
• Checkbox des CGU

Vous pouvez bien comprendre que cela fera un peu un code à rallonge... 

Malgrès mon faible niveau en jQuery, j'aurais souhaité avoir une solution pour un code plus optimisé.

Par exemple, une fonction qui pourrait gérer n'importe quelle champ de mon formulaire, mais bon comme je vous l'ai dit, j'ai un faible niveau en jQuery. Malgrés tout ça, je ne relâche rien. Comme on dit : "C'est en forgeant qu'on est forgeron.".

Je vous remercie par avance de l'aide que vous pourrez m'apporter.

Ps : Je sais, ça fait un peu de lecture lol, il m'était important de tout vous expliqué, pour qu'il y ai aucun malentendu :')

-
Edité par Neveer 12 août 2018 à 21:07:38

Salut,

Ton code est propre, il fait ce que tu lui demandes.

Cependant, quelques axes d'amélioration :

• La vérification de champs peut se faire directement en HTML5 grâce aux attributs pattern et required par exemple. Je te laisse te documenter à ce sujet.
• Les .val(), tu peux les stocker dans ta méthode.
• Plutôt que d'écouter le click sur le bouton Inscrire, écoute plutôt sur la validation du formulaire (event submit). Ainsi, si tu rencontres une erreur, tu peux faire un return false;, qui annulera l'envoi du formulaire. Bien sûr, cette partie est inutile si tu procèdes à la vérification directement en HTML5 (qui a en plus l'avantage de fonctionner même si JavaScript est désactivé.)

Bien à toi.

Bonsoir,

Excusez-moi de vous avoir fait attendre. 

Voici mon code jQuery, comme vous me l'avez conseillé : 

    $(document).ready(function() {
        // Variables
            var $username = $('#username');
            var $field = $('._inputControl');
            var $pressForm = $('#_buttonSubForm');
            var errorLine = $('._legendError-Text');

        // Treatment of username
        $username.blur(function() {
            if ($username.val() == '') {
                $username.css({
                    borderColor: 'red',
                    color: 'red',
                    boxShadow: '0 0 8px red'
                });
                $username.next(errorLine).css({visibility: "visible", opacity: "1"}).show().html("<p class='_legendError-Text'>Vous devez renseigner un nom d'utilisateur.</p>");
                return false;
            } else if (!$username.val() == '') {
                $username.css({
                    borderColor: 'green',
                    color: 'green',
                    boxShadow: '0 0 8px green'
                });
                $username.next($('._legendError')).css({display: "none"});
            }
        });
        // Treatment of email adress
        // Treatment of password
        // Treatment of password the confirm
        // Treatment of button submit top
            $pressForm.submit(function() {
                if ($username.val() == '') {
                    return false;
                } if (!$username.val() == '') {
                    return true;
                }
            });
    });

Mais... (toujours un mais, lol), le hic, est que eme si sa retourne false, le formulaire n'est pas bloqué et donc il n'affichepas les erreurs...

Le blur fonctionne très bien, mais c'est lorsque je veux cliquer sur le bouton submit qui ne me bloque pas le formulaire, donc ma page.

Pourquoi ? What ? Lol

Je vous remercie d'avance de votre ai dequi m'est bien précieuse :')

Bonne soirée.

Cordialement,

-
Edité par Neveer 15 août 2018 à 13:44:45