condition validation formulaire

21 juin 2011 à 0:52:48

Bonjour à tous,

J'ai besoin d'un petit coup de pouce en javascript /JQUERY (je ne sais pas trop ...).

J'ai un formulaire, avec une multitude de champs de type text, dans lequel l'utilisateur va indiquer le nombre d'exemplaire qu'il souhaite commander.
Chaque produit, contient donc un champs de type text en dessous.

Par défaut ces champs sont à 0.

Et je souhaiterais que la validation du formulaire ne soit possible que si au moins un des champs est égal à 1.
Sinon on affiche un message alert 'Veuillez sélectionner au moins un produit'.

Avez vous une idée ?

Merci beaucoup

Erroll

21 juin 2011 à 7:51:53

Salut, en jquery j'aurais fait ça :

$('#bouton_valider').bind('click', verifier() );

var valider; 

/* fonction verifier */
function verifier(){ 
var compteur = 0;

$('tes_inputs').each(function(){
	if ( $(this).val > 0) compteur++;
});

if (compteur> 0) valider = true;
else valider = false;

return false// empêche l'action du click
}

/* utiliser résultats */
function autre_fonction(){
	if (valider) {
		//...la suite
	}
}

astro53

21 juin 2011 à 8:30:03

Salut

Erroll, l'utilisation de variable global est deconseiller. Surtout si ton fichier javascript est gros.
Je ne vois pas trop l'interet de autre_fonction non plus. si au moment du click tu as fait la verification alors pas besoin de verifier dans les fonctions utiliser apres

En reprenant le code de Erroll j'aurais fait legerement plus simple

$('#bouton_valider').bind('click', verifier() );

/* fonction verifier */
function verifier(){ 
var compteur = 0,callAlert=false;

$('tes_inputs').each(function(){
  var $this = $(this);
  if(isNaN($this.val)) callAlert=true;
  else if($this.val > 0) compteur++;
});

if(callAlert){
  alert("The text fields MUST BE FILL with a number!");
  return false;
}
return compteur > 0;
}

J'ai rajouter en plus une verification que l'utilisateur a bien rentrer un nomnbre et pas autre chose.

A bientot
Astro

Erroll

21 juin 2011 à 10:30:20

Je suis d'accord, le code est plus simple et mieux.

webfabien

21 juin 2011 à 11:52:42

Bonjour,

Merci beaucoup de votre aide !

Cependant, j'ai bien inséré le script, mais rien ne se passe ...

Voici le code de ma page ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<form action="etape2.php" method="post" name="myform">
<table width="600">
<?php
//Je déclare le nombre de photos contenu dans mon dossier -1
$nbphotos = 25;

//Je crée une boucle pour afficher les photos
for ($i=0; $i<=$nbphotos; $i++){
	if($i%5==0){
		echo '<tr></tr>';
	}
	echo '<td>
			<img src="img/'.$i.'.jpg" /><br />
			<input type="text" value="0" size="2" name="qte[]" />
			<input type="hidden" value="'.$i.'" name="ref" />
		</td>';
		
}


?>
</table>
<input type="submit" name="valider" id="valider" class="valider" />
</form>
<script type="text/javascript">
$('#valider').bind('click', verifier() );

/* fonction verifier */
function verifier(){ 
var compteur = 0,callAlert=false;

$('qte[]').each(function(){
  var $this = $(this);
  if(isNaN($this.val)) callAlert=true;
  else if($this.val > 0) compteur++;
});

if(callAlert){
  alert("The text fields MUST BE FILL with a number!");
  return false;
}
return compteur > 0;
}
</script>
</body>
</html>

miclebowski

21 juin 2011 à 16:49:00

Salut,

y a 2 soucis :

1) Le sélecteur : ce sera mieux comme ça : $('input[name="qte[]"]') tu aurais d'ailleurs pu le voir grâce a la console d'erreurs.
2) C'est $this.val()

badajoz

21 juin 2011 à 17:14:39

Salut,

N'oublie pas d'intégrer JQuery dans ton code.

webfabien

21 juin 2011 à 17:53:41

Merci beaucoup de votre réactivité !!

J'ai bien intégré le Jquery, quel âne d'avoir oublié ça

En revanche, entre temps j'ai été obligé de rajouter un nom de mes input qui évolue en fonction de la boucle ...

Est-ce que du coup je peux rajouter une classe, pour selectionner l'input grâce à la class plutôt que le nom ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
</head>

<body>
<form action="etape2.php" method="post" name="myform">
<table width="600" cellpadding="20" cellpadding="10">
<?php
//Je déclare le nombre de photos contenu dans mon dossier -1
$nbphotos = 25;
echo '<tr>';
//Je crée une boucle pour afficher les photos
for ($i=0; $i<=$nbphotos; $i++){
	if ($i>0){
	if($i%5==0){
		echo '</tr><tr>';
	}
	}
	echo '<td>
			<img src="img/'.$i.'.jpg" /><br />
			<em>R&eacute;f : '.$i.'</em><br />
			<input type="text" value="0" size="2" name="qte'.$i.'" />
			<input type="hidden" value="'.$i.'" name="ref'.$i.'" />
		</td>';
		
}

echo '</tr>';
?>
</table>
<input type="submit" name="valider" id="valider" class="valider" />
</form>
<script type="text/javascript">
$('#valider').bind('click', verifier() );

/* fonction verifier */
function verifier(){ 
var compteur = 0,callAlert=false;

$('input[name="qte[]"]').each(function(){
  var $this = $(this);
  if(isNaN($this.val())) callAlert=true;
  else if($this.val() > 0) compteur++;
});

if(callAlert){
  alert("The text fields MUST BE FILL with a number!");
  return false;
}
return compteur > 0;
}
</script>
</body>
</html>

miclebowski

21 juin 2011 à 17:58:18

Évidemment (tu devrais relire le tuto jQuery, c'est vraiment la base ça

)

$('.maClasse').each(function(){ etc...

webfabien

21 juin 2011 à 19:32:38

J'ai intégré ça dans mon code :

<script type="text/javascript">
$('#valider').bind('click', verifier() );

/* fonction verifier */
function verifier(){ 
var compteur = 0,callAlert=false;

$('input.quantite]').each(function(){
  var $this = $(this);
  if(isNaN($this.val())) callAlert=true;
  else if($this.val() > 0) compteur++;
});

if(callAlert){
  alert("The text fields MUST BE FILL with a number!");
  return false;
}
return compteur > 0;
}
</script>

et ça dans mes input

<input type="text" value="0" maxlength="2" size="2" name="qte'.$i.'" class="quantite" />

Mais mon formulaire reste bloqué en permanence ...

astro53

22 juin 2011 à 0:04:26

Salut

ligne 8 tu as un "]" en trop
$('input.quantite]')

$('input.quantite')

A bientot
Astro