Récupération des valeurs des inputs

Sujet résolu

28 novembre 2021 à 14:43:33

Bonjour à tous,

j'ai un léger soucis de code qui à mon avis sera vite régler

J'ai crée un formulaire qui enregistre un étudiant a ce niveau pas de problème, Je veux vérifier que chaque champ sois remplir avant d'envoyer les données du formulaire mais je n'arrive pas, j'ai vraiment besoin de votre aide.

Je vous l'aise le code html et JavaScript pour que vous pussiez mieux comprendre.

fichier html:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/fichier_css/enregistrement.css">
    <title>Enregistrement</title>
</head>
<body>
    <!--Barre de navigation-->
    <div class="navbar">
        <div id="logo"><a href="/fichier_html/accueil.html">LOGO</a></div>
        <ul>
            <li><a href="/fichier_html/accueil.html" >Accueil</a></li>
            <li><a href="/fichier_html/statistique.html">Statistique</a></li>
            <li><a href="/fichier_html/enregistrement.html" style="text-transform: uppercase; font-size: 23px;">Enregistrement</a></li>
        </ul>
    </div>

    <!--Corp de page-->
    <div class="wrapper">
        <form>
            <div class="container-form">
                <div class="cote_gauche"></div>

                <div class="cote_droite">
                    <div class="titre">
                        <h1>Formulaire d'enregistrement</h1>
                    </div>

                    <div class="name">
                        <p>
                            <label for="nom">Nom :</label> <br> 
                            <input  type="text" name="nom" id="nom">
                        </p>

                        <p>
                            <label for="prenom">Prenom :</label> <br> 
                            <input  type="text" id="prenom" name="prenom">
                        </p>
                    </div>
                    <div>
                        <label for="adresse">Adresse :</label><br> 
                        <input  type="text" id="adresse" name="adresse">
                    </div>
                    <div class="input" >
                        Genre :<label for="masculin"> homme </label>
                        <input  type="radio" id="masculin" name="sex" value="homme"> 
                        <label for="feminin">femme</label>
                        <input  type="radio" name="sex" id="feminin" value="femme">
                    </div>
                    <div>
                        <label for="parcours">Parcours :</label><br> 
                        <select name="" id="">
                            <option value="python" name="python">PYTHON</option>
                            <option value="php" name="php">PHP</option>
                            <option value="javascript" name="javascript">JAVASCRIPT</option>
                        </select>
                    </div>
                    <div>
                        <label for="tel">Numero de Tel :</label> <br> 
                        <input  type="tel" id="tel" name="numero_telephone">
                    </div>
                    <div>
                        <label for="email">Email :</label><br> 
                        <input  name="email" type="email" id="email">
                    </div>
                    <div class="valider">
                        <input  type="reset" class="restaurer" value="Restorer">
                        <input type="submit" value="Inscription" id="enregistrer">
                    </div>
                    <p class="erreur"></p>

                </div>
            </div>
        </form>
    </div>
<script src="/fichier_js/script_enregistrement.js"></script>    
</body> </html>

// Recuperation des éléments
let bnt_enregistrer = document.querySelector("#enregistrer")
let paragraphe_erreur = document.querySelector(".erreur");
let inputs = document.querySelectorAll("input")
let valeur_radio;
let erreur;

bnt_enregistrer.addEventListener("click", (e) => {

	// On verifie que tout les champs sont remplir
	for (let i = 0; i < inputs.length; i++) {
		if (!inputs[i].value) {
			console.log("input pris en charge", inputs[i]);

			erreur = "Veuillez remplir tous les champs"
		}
	}

	if (erreur) {
		paragraphe_erreur.textContent = erreur
	}
	else {
		alert("Formaulaire validé")
	}
	
	e.preventDefault();
})

Arthur222

28 novembre 2021 à 20:40:19

Salut,

tu vas trouver ce que tu cherches avec required :

<input type="text" required="required">

Si tu voulais sécuriser pour être sûr que personne ne pirate ton formulaire, il faudrait faire la vérification sur une page php, sinon n'importe qui peut faire clic droit > inspecter l'élément > et éditer le code js que tu as mis, car le js est écrit dans la page du navigateur. Alors que le php se trouverait sur une page php sur le serveur (l'endroit ou tu mets toutes tes pages quand le site est en ligne) et dans ce cas il n'aurait pas accès à ce code là (enfin il y a des protections à rajouter, mais c'est déjà beaucoup plus sécurisé.)

SamuelGaborieau3

29 novembre 2021 à 10:09:59

Bonjour tu pourrais nous indiqué ce qui ne fonctionne pas avec ton code actuel, est-ce que tu as message d'erreur dans la console de développement ?

Comme te la dit @Arthur222 l'attribut required peut te permettre d'indiqué au navigateur que le champs et obligatoire (il doit contenir un caractère où plus), sans avoir besoin d'écrire du javascript, si pour certain champs tu veut posé des contraintes sur le format (par exemple pour le champs nom et prénom) tu peut aussi utilisé l'attribut pattern

Par exemple tu peut indiqué:

<div class="name">
  <p>
    <label for="nom">Nom :</label> <br>
    <input  type="text" name="nom" id="nom" required pattern="^[A-Z][a-z]{1,30}$">
  </p>

  <p>
    <label for="prenom">Prenom :</label> <br>
    <input  type="text" id="prenom" name="prenom" required pattern="^[A-Z][a-z]{1,30}$">
  </p>
</div>

Qui n'accepteras que les contenue commençant par une lettre majuscule suivit de 1 à 30 lettres minuscules puis rien d'autre.

Avec cette solution là ces le navigateur qui affiche un message d'erreur à utilisateur je ne pense pas que ce soit personnalisable où si le message et personnalisable la mise en forme ne le sera pas.

Si veut une personnalisation plus poussé des messages d'erreurs il faudra en effet que tu fasses le traitement manuellement via du javascript pour pouvoir inséré manuellement les messages d'erreur et appliqué le CSS que tu voudras.

A noté que ces vérifications sont faites côté client (dans le navigateur), le serveur qui reçoit les données, doit quand même les vérifiées avant de les validées, les vérifications côté client servent à avertir l'utilisateur que le formulaire ne seras pas validé par le serveur et donc de corrigé ses erreurs plus vite, c'est uniquement pour le confort de l'utilisation elle n'apporte aucune couche de sécurité, un utilisateur mal intentionné pourrait facilement ouvrir sa console de développement modifié la structure HTML (retiré les l'attributs required et pattern des input) pour désactivé la vérification faite par son navigateur.

-
Edité par SamuelGaborieau3 29 novembre 2021 à 10:11:54

suggestion de présentation.

Franck_popo

30 novembre 2021 à 13:26:20

Merci les gars je vient de résoudre mon soucis