Salut tout le forum.

J’ai besoin de votre aide.

je crée un scripts en Javascript qui vérifie le contenu d’un formulaire.

function controleCompteRendu(){

	var autorisation = true;

	// Si système est vide
	if(compteRendu.elements['systeme'].value == ""){
		alert("Il manque la désignation du système.");
		autorisation = false;
	}

	// Si intervention_realisee est vide
	if(compteRendu.elements['intervention_realisee'].value == ""){
		alert("Il manque la description de l'intervention réalisée.");
		autorisation = false;
	}

	// Si resultat est vide
	if(compteRendu.elements['resultat'].value == ""){
		alert("Il manque le résultat de l'intervention.");
		autorisation = false;
	}

	// Si cout_horaire est vide
	if(compteRendu.elements['cout_horaire'].value == ""){
		alert("Il manque le coût horaire de main d'œuvre.");
		autorisation = false;
	}

	return autorisation;
}

Est-il possible de programmer pour n'avoir qu'une seule alert récapitulative de tout ce qui manque avec les bons messages adaptés à ce que l'utilisateur a oublié ?

Merci pour votre aide.

_seb_

-
Edité par _seb_ 13 janvier 2018 à 19:03:21

Salut,

pour faire ça il suffit de déclarer une variable au début et de l'initialiser avec une chaîne de caractère vide. Ensuite dans chacune de tes conditions tu ajoutes à ton message d'erreur le texte. Pour finir, à la fin tu vérifies que autorisation est à false et si oui alors tu affiches ton alert avec le message d'erreur que tu as construit au fur et à mesure.

Je te laisse essayer

Voilà où j'en suis :

function controleCompteRendu(){

	var autorisation = true;

	// Variable msg : à chaque défauts de saisie du formulaire un message sera ajouté par msg+=
	var msg = ['Il manque :<br><br>'];

	// Si système est vide
	if(compteRendu.elements['systeme'].value == ""){
		msg+="<li>La désignation du système.</li>";
		autorisation = false;
	}

	// Si intervention_realisee est vide
	if(compteRendu.elements['intervention_realisee'].value == ""){
		msg+="<li>La description de l'intervention réalisée.</li>";
		autorisation = false;
	}

	// Si resultat est vide
	if(compteRendu.elements['resultat'].value == ""){
		msg+="<li>Le résultat de l'intervention.</li>";
		autorisation = false;
	}

	// etc...


	if(autorisation == false){
		// Faire apparaitre la div affichageMessage
		$('#affichageMessage').css('display','block');
		// Faire apparaitre balises <ol> de la div affichageMessage
		$('#baliseOL').css('display','block');
		// Afficher les messages
		document.getElementById("baliseOL").innerHTML = msg;
		// Bloquer l'envoie du formulaire
		return false;
	}
	else{
		// Autoriser l'envoie du formulaire
		return true;
	}
}

-
Edité par _seb_ 14 janvier 2018 à 17:09:01

Je dirais qu'il manque juste la gestion des retours à la ligne. Parce que là je pense que tous tes messages vont ce mettre les un à la suite des autres et ça sera pas très lisible.

Ensuite, je suis plutôt partisant d'avoir une zone réservé à l'affichage des messages d'erreur.

Tu peux aussi vérifier à chaque changement de focus (ou à chaque lettre inscrit) que le champs associé est correct ou non et affiché le message d'erreur à côté ou dans une petite pop-in juste à côté.

Les pop-up pour dire que ça va pas c'est plus trop dans l'air du temps.

Ce ne sont que des idées

Voilà le rendu :

la div s'affiche au dessus du formulaire en fixed, elle suit le scroll

En javascript :

    // Si système est vide
    if(compteRendu.elements['systeme'].value == ""){
        msg+="<li>La désignation du système.</li>";
        autorisation = false;
    }
 
    // etc...
  
    if(autorisation == false){
        // Faire apparaitre la div affichageMessage
        $('#affichageMessage').css('display','block');
        // Faire apparaitre balises <ol> de la div affichageMessage
        $('#baliseOL').css('display','block');
        // Afficher les messages
        document.getElementById("baliseOL").innerHTML = msg;
        // Bloquer l'envoie du formulaire
        return false;
    }

Dans le HTML :

		<div id="affichageMessage" class="affichageMessage">
			<ol id="baliseOL" class="baliseOL"></ol>
		</div>

Dans le CSS :

.affichageMessage{
color:rgb(0,0,0);
background-color:#FFFFFF;/*blanc*/
padding:20px;/*marge intérieure*/
font-size:1.3em;/*taille du texte*/
border:3px solid red;
border-radius:10px;
text-align:left;
position:fixed;
right:1%;
top:1%;
display:none;
}
.baliseOL{
display:none;
}

Dans le formulaire j'ai mis des required, type="number"

<input type="number" step="any" placeholder="1.5" name="duree" id="number" required/>

Question sur le fonctionnement du forum :

Y a-t-il un moyen de recevoir un mail lors d'une réponse à une conversation créé ?

-
Edité par _seb_ 15 janvier 2018 à 10:31:22

A ma connaissance non, tu peux juste recevoir des notifications sur ton compte en te connectant sur le site.

En tout cas je n'ai pas vue une quelconque option dans les paramètres :\

Ah avec le rendu je comprend mieux, je pensais que tu affichais les erreurs à grand coup de window.alert() vue que tu avais mis 'alert' en titre