11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de validation de formulaire en javascript

Bonjour,
Débutant en développement web, je rencontre un problème lors de la validation d’un formulaire en JavaScript.
J’ai développé plusieurs fonctions de vérification pour chaque champ de ce formulaire. A ce niveau tout fonctionne correctement.
Mon problème se trouve au niveau de la validation. Il est impossible de valider. Je ne comprends pas pourquoi, j’ai pourtant respecté toute la littérature en ma possession.
L’un d’entre vous pourrait-il m’aider à résoudre mon problème ? D’avance merci pour votre aide.
PS : tout commentaire pour améliorer mon code est le bien venu.


<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css3/style.css" />
		<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
		<title>Ajouter consommation de carburant</title>
		<?php include"../connection/connection.php"; ?>
		<?php include'../fonctions/fonctions.php'; ?>
		<!-- calendar stylesheet -->
		<link rel="stylesheet" type="text/css" media="all" href="http://localhost/centsoucis3/Calendar/CSS/calendar-brown.css" title="win2k-bleu" />
		<!-- main calendar program -->
		<script type="text/javascript" src="http://localhost/centsoucis3/Calendar/JS/calendar.js"></script>
		<!-- language for the calendar -->
		<script type="text/javascript" src="http://localhost/centsoucis3/Calendar/lang/calendar-en.js"></script>
		<!-- the following script defines the Calendar.setup helper function, which makes adding a calendar a matter of 1 or 2 lines of code. -->
		<script type="text/javascript" src="http://localhost/centsoucis3/Calendar/JS/calendar-setup.js"></script>
		<script src="http://localhost/centsoucis3/Scripts/MyCalander.css" type="text/javascript"></script>

    <script type="text/javascript" src="fonctions.js"></script>


		<style>
    .error {color: #FF0000;}
  	</style>
	</head>

	<body>
		<?php
		// sélection du dernier index Km
		$reponse2 = $bdd->query('SELECT odometre FROM carburant_cruze WHERE litre <> 0 ORDER BY id DESC LIMIT 0, 1');
		$donnees2 = $reponse2->fetch();

		// index kilométrique
		$idxkm = $donnees2['odometre'];
		?>
		<form method="post" name="form" id="form" action="Ajout_cons_post.php" onSubmit="verifForm(this)">
		<div id="bloc_page">

		<?php include"../entete.php" ; ?>

			<section>
				<article>
					<h1><img src="../images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Ajouter un enregistrement dans les consommations de carburant</h1>

						<p>
						<label for="date">Date : </label>
						<input type="text" name="date" id="date" size="28" onfocus="return showCalendar('date', '%d-%m-%Y', '24');" onclick="return showCalendar('date', '%d-%m-%Y', '24');" placeholder="Date du plein" onblur="verifDatejjmmaaaa(this)"/>
						<span  id="spanDate" class="error" ></span>
						<br><br>


						<label for="odometre">Odomètre: </label>
						<input type="text" name="odometre" id="odometre" size="28" maxlength="6" min="<?php echo $idxkm;?>" max="300000" placeholder="Km total du véhicule" onblur="verifOdometre(this)"/>
						<span id="spanodometre" class="error"></span>
						<br><br>


						<label for="litre">Litres: </label>
						<input type="text" name="litre" id="litre" size="28" maxlength="5" pattern="(^\d{1,2})+(\.\d{2})?" placeholder="nombre de litres"  onblur="verifLitre(this)"/>
						<span id="spanlitre" class="error"></span>
						<br><br>


						<label for="prix">Prix: </label>
						<input type="text" name="prix" id="prix" size="28" maxlength="6" pattern="(^\d{1,3})+(\.\d{2})?" placeholder="montant de la facture" onblur="verifPrix(this)"/>
						<span id="spanprix" class="error"></span>
						<br><br>

						<label for="boutton" class="label_point">.</label>
						<input type="submit" name="submit" value="Valider" id="boutton" />
						</p>

				</article>
			</section>

		<?php include"footer.php" ;?>

		</div>
		</form>
	</body>
</html>




function verifdt(champ){
        var verdat=champ.value;
        var datej= new Date();
        var anneej=datej.getFullYear()+"*";
        var anneej=anneej.substring(0,2);
  // Vérifie si les séparateurs ont été introduit
  if (verdat.length ===6){
    verdat=verdat.substring(0,2)+"-"+verdat.substring(4,2)+"-"+anneej+verdat.substring(6,4);
  }
  if (verdat.length ===8){
    verdat=verdat.substring(0,2)+"-"+verdat.substring(4,2)+"-"+verdat.substring(8,4);
  }

  if(isValidDate(verdat)){
    champ.value = verdat;
    return true;
  }
  else{
    return false;
  }

}

function isValidDate(d) {
  var dateRegEx =/^((((0?[1-9]|[12]\d|3[01])[\.\-](0?[13578]|1[02])[\.\-]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-](0?[13456789]|1[012])[\.\-]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-]0?2[\.\-]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-]0?2[\.\-]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;
  return d.match(dateRegEx);
}

function surligne(champ, erreur)
  {
   if(erreur){
    champ.style.color="#ff0000";
    champ.style.borderColor="#ffbba3";
   }
  else{
    champ.style.color="";
    champ.style.borderColor="";
  }
}

function verifForm(f){
   var dateOk = verifDatejjmmaaaa(f.date);
   var odometreOk = verifOdometre(f.odometre);
   var litreOk = verifLitre(f.litre);
   var prixOk = verifPrix(f.prix);

   if(dateOk && odometreOk && litreOk && prixOk){
      alert("dateOk : " + dateOk);
      alert("odometreOk : " + odometreOk);
      alert("litreOk : " + litreOk);
      alert("prixOk : " + prixOk);
      return true;
      }
   else
   {
      alert("dateOk : " + dateOk);
      alert("odometreOk : " + odometreOk);
      alert("litreOk : " + litreOk);
      alert("prixOk : " + prixOk);
      alert("Veuillez remplir correctement tous les champs");
      return false;
   }
}

function champVide(champ) {
  if (champ.value.replace(/\s/g,"") === "") {
      return true;
    }
      else
    {
      return false;
    }
}

function verifDatejjmmaaaa(champ){
  var missDate = document.getElementById("spanDate");
  var fdate = champ;

     if(champVide(fdate)){
      surligne(champ,true);
      missDate.textContent = "* Le champ est obligatoire";
      return false;
    }
    if(!verifdt(fdate)){
      surligne(champ,true);
      missDate.textContent = "* La date n'est pas valide";
      return false;
    }
      else
    {
      surligne(champ,false);
      missDate.textContent = "*";
      return true;
    }
}

function estUnNombre(champ){
  var valNb = parseInt(champ.value,10);
if(isNaN(valNb)){
  return false;
}
  else{
    return true;
  }
}

function estUnEntier(champ) {
  var valNb = champ.value;
  if((parseFloat(valNb,10) === parseInt(valNb,10)) && !Number.isNaN(valNb))
  {
      return true;
  }
  else
  {
      return false;
  }
}

function entreMinMax(champ,minNb,maxNb){
  //var odometre = document.getElementById("odometre")
  var valNb = parseInt(champ.value,10);

  if(Number.isNaN(valNb) || Number.isNaN(minNb) || Number.isNaN(maxNb) || valNb <= minNb || valNb > maxNb){
    return true;
  }
    else
  {
    return false;
  }
}

function verifOdometre(champ){
  var missOdometre = document.getElementById("spanodometre");
  var valNb = champ;
  var minNb = champ.min;
  var maxNb = champ.max;

    if(champVide(valNb)){
      surligne(champ,true);
      missOdometre.textContent = "* Le champ est obligatoire";
      return false;
    }
    if(!estUnNombre(valNb)){
      surligne(champ,true);
      missOdometre.textContent = "* N'est pas un nombre";
      return false;
    }
    if(!estUnEntier(valNb)){
      surligne(champ,true);
      missOdometre.textContent = "* N'est pas un entier";
      return false;
      }
    if(entreMinMax(valNb,minNb,maxNb)){
      surligne(champ,true);
      missOdometre.textContent = "* N'est pas entre " + minNb + " et " + maxNb;
      return false;
    }
    const regex = /^[0-9]{1,5}$/gm;
    if(!regex.test(champ.value))
    {
      surligne(champ,true);
      event.preventDefault();
      missOdometre.textContent = "* format incorecte";
      return false;
    }
    else
    {
      surligne(champ,false);
      missOdometre.textContent = "*";
      return true;
    }
}

function verifLitre(champ){
  var missLitre = document.getElementById("spanlitre");
  var valLitre  = champ;
  const regex = /(^\d{1,2})+(\.\d{2})?$/gm;
  var maxLitre = 70;

  if(champVide(valLitre)){
      surligne(champ,true);
      missLitre.textContent = "* Le champ est obligatoire";
      return false;
    }
  if(!estUnNombre(valLitre)){
    surligne(champ,true);
    event.preventDefault();
    missLitre.textContent = "* N'est pas un nombre";
    return false;
  }
  if(!regex.test(valLitre.value)){
      surligne(champ,true);
      event.preventDefault();
      missLitre.textContent = "* format incorecte";
      return false;
    }
  if(valLitre.value > maxLitre){
      surligne(champ,true);
      event.preventDefault();
      missLitre.textContent = "* valeur maximum : " + maxLitre;
      return false;
  }
  else
  {
    surligne(champ,false);
    event.preventDefault();
    missLitre.textContent = "* ";
    return true;
  }
}

function verifPrix(champ){
  var missPrix = document.getElementById("spanprix");
  var valPrix  = champ;
  const regex = /(^\d{1,3})+(\.\d{2})?$/gm;

  if(champVide(valPrix)){
      surligne(champ,true);
      missPrix.textContent = "* Le champ est obligatoire";
      return false;
    }
  if(!estUnNombre(valPrix)){
    surligne(champ,true);
    event.preventDefault();
    missPrix.textContent = "* N'est pas un nombre";
    return false;
  }
  if(!regex.test(valPrix.value)){
      surligne(champ,true);
      event.preventDefault();
      missPrix.textContent = "* format incorecte";
      return false;
    }
  else
  {
    surligne(champ,false);
    event.preventDefault();
    missPrix.textContent = "* ";
    return true;
  }
}
Bonjour Phil2web,

Je n'est pas vérifié tes tests, mais essayes de mettre un return dans le form:
onSubmit="return verifForm(this)"
Bonjour aliasdmc et merci pour ton aide. J'ai corrigé en suivant tes instructions mais rien ne change. Smiley confus
Sujet clos
Aller à