appliquer contraintes d'integrité en JS

Version imprimable

bjour, voila je suis en train de créer un formulaire, j'ai commencé a faire les contraintes d'intégrité, pour la syntaxe de l'adresse mail et les champs vides.

Mais j'aimerai bien qu'on me donne la procédure pour quelques controles spécifiques que je n'ai pas trouvé :

1. que l'on doive forcement cocher une liste, sinon une fenetre apparait disant de cocher une liste, comme pour une textbox.

2. que l'on doive forcement cocher un des boutons radio, sinon une fenetre apparait disant de cocher un bouton radio, comme pour une textbox.

3. que l'on doive forcement choisir une date, sinon une fenetre apparait disant de choisir une date, comme pour une textbox.

4. que le numero d'immatriculation ait forement ce type de syntaxe : ZZZAAAAA00000000

5. que par exemple la textbox prenom ne depasse pas 20 caracteres, et ne contienne pas de chiffres.

voila un bout du code, si on pourrait m'indiquer ces infos ce serait simpa, merci d avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script language="Javascript" type="text/javascript">
 
var fieldstocheck = new Array();
    fieldnames = new Array();
 
function checkform() {
  for (i=0;i<fieldstocheck.length;i++) {
    if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") {
      alert("Veuillez entrer votre "+fieldnames[i]);
      eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
      return false;
    }
  }
 
  return true;
}
 
 
function addFieldToCheck(value,name) {
  fieldstocheck[fieldstocheck.length] = value;
  fieldnames[fieldnames.length] = name;
}
 
function compareEmail()
{
  return (document.subscribeform.elements["email"].value == document.subscribeform.elements["emailconfirm"].value);
}
 
</script>
 
<form method="post" action="http://localhost/lists/?p=subscribe&id=1" name="subscribeform" target = "_parent">
 
<table width="646" border="0">
  <tr>
    <td width="405">Email : </td>
    <td width="231"><input type="text" name="email" value = ""></td>
  </tr>
 
  <tr>
    <td>Civilit&eacute; :</td>
    <td>M.    <input type=radio  class="attributeinput" name="attribute19" value="4" >
Mlle  <input type=radio  class="attributeinput" name="attribute19" value="3" >
Mme   <input type=radio  class="attributeinput" name="attribute19" value="2" ></td>
  </tr>
  <tr>
    <td>Nom :</td>
    <td><input type=text name="attribute15"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute15","Nom");</script></td>
  </tr>
  <tr>
    <td>Pr&eacute;nom :</td>
    <td><input type=text name="attribute16"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute16","Prénom");</script></td>
  </tr>
  <tr>
    <td>date de naissance</td>
    <td><input type=hidden name="attribute34" value="1"><!-- 30 / 08 / 2006 --><select name="day[attribute34]"><option value="1" >1<option value="2" >2<option value="3" >3<option value="4" >4<option value="5" >5<option value="6" >6<option value="7" >7<option value="8" >8<option value="9" >9<option value="10" >10<option value="11" >11<option value="12" >12<option value="13" >13<option value="14" >14<option value="15" >15<option value="16" >16<option value="17" >17<option value="18" >18<option value="19" >19<option value="20" >20<option value="21" >21<option value="22" >22<option value="23" >23<option value="24" >24<option value="25" >25<option value="26" >26<option value="27" >27<option value="28" >28<option value="29" >29<option value="30" selected>30<option value="31" >31</select><select name="month[attribute34]"><option value="01" >Janvier<option value="02" >F&eacute;vrier<option value="03" >Mars<option value="04" >Avril<option value="05" >Mai<option value="06" >Juin<option value="07" >Juillet<option value="08" selected>Ao&ucirc;t<option value="09" >Septembre<option value="10" >Octobre<option value="11" >Novembre<option value="12" >Decembre</select><select name="year[attribute34]"><option >1907<option >1908<option >1909<option >1910<option >1911<option >1912<option >1913<option >1914<option >1915<option >1916<option >1917<option >1918<option >1919<option >1920<option >1921<option >1922<option >1923<option >1924<option >1925<option >1926<option >1927<option >1928<option >1929<option >1930<option >1931<option >1932<option >1933<option >1934<option >1935<option >1936<option >1937<option >1938<option >1939<option >1940<option >1941<option >1942<option >1943<option >1944<option >1945<option >1946<option >1947<option >1948<option >1949<option >1950<option >1951<option >1952<option >1953<option >1954<option >1955<option >1956<option >1957<option >1958<option >1959<option >1960<option >1961<option >1962<option >1963<option >1964<option >1965<option >1966<option >1967<option >1968<option >1969<option >1970<option >1971<option >1972<option >1973<option >1974<option >1975<option >1976<option >1977<option >1978<option >1979<option >1980<option >1981<option >1982<option >1983<option >1984<option >1985<option >1986<option >1987<option >1988<option >1989<option >1990<option >1991<option >1992<option >1993<option >1994<option >1995<option >1996<option >1997<option >1998<option >1999<option >2000<option >2001<option >2002<option >2003<option >2004<option >2005<option selected>2006</select></td></tr></td></tr>
</td>
  </tr>
 
  <tr>
    <td>N&deg; d immatriculation</td>
    <td><input type=text name="attribute24"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute24","N° d immatriculation");</script></td>
  </tr>
 
 
</table>
 
</table><br><br><p><b>Listes disponibles </b><br>Veuillez sélectionner les listes auxquelles vous désirez vous abonner:</p><ul class="list"><li class="list"><input type="checkbox" name="list[1]" value=signup  /><b>Autos</b><div class="listdescription"><input type=hidden name="listname[1]" value="voiture"/></div></li><li class="list"><input type="checkbox" name="list[7]" value=signup  /><b>motos</b><div class="listdescription">
 
 
<BR><input class="submit" type=submit name="subscribe" value="S'abonner" onClick="return checkform();"></p>
</form><br/><br/>
<div id="depthpath"><a href="http://127.0.0.1/lists/?p=unsubscribe&id=1">Se désabonner</a></div>
</html>
</body>

31/08/2006, 12h55
FremyCompany

utilise

Code:

<form>.onsubmit=eventHandler { return (true|false); }

et les RegExp
31/08/2006, 13h03
javatwister

pas d'eval sur des champs remplis par l'utilisateur, merci :roll:

pas de formulaire sans savoir comment le soumettre;

pas de formulaire dans un tableau: ça c'est personnel, j'attrape une crise de démence dès que je vois ça;

pour le reste, travaille les tutoriels javascript, sur ce site ou ailleurs: il te manque trop de connaissances du langage pour pouvoir créer un script aussi complexe;

bref, on ne sera pas efficaces pour t'aider si tu ne travailles pas un peu les zones d'ombres dans ta compréhension de javascript
;)

Citation:

Envoyé par javatwister

pas d'eval sur des champs remplis par l'utilisateur, merci :roll:

pas de formulaire sans savoir comment le soumettre;

pas de formulaire dans un tableau: ça c'est personnel, j'attrape une crise de démence dès que je vois ça;

pour le reste, travaille les tutoriels javascript, sur ce site ou ailleurs: il te manque trop de connaissances du langage pour pouvoir créer un script aussi complexe;

bref, on ne sera pas efficaces pour t'aider si tu ne travailles pas un peu les zones d'ombres dans ta compréhension de javascript
;)

Bien d'accord merci du lien j'ai été voir ca. Seulement comment est il possible avec ce code de determiner si la box est vide pour TOUT mes attrbuts de la page ?

voila juste pour l'attribut prenom :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function valider(){ // si la valeur du champ prenom est non vide if(document.formSaisie.prenom.value != "") { // les données sont ok, on peut envoyer le formulaire return true; } else { // sinon on affiche un message alert("Saisissez le prénom"); // et on indique de ne pas envoyer le formulaire return false; } }
Comment serait il possible de faire pour checker si la box est vide pour l'ensemble des attributs ?

ps : sur l exemple du form d openweb, ils utilisenet une methode GET....cela n ets pourtant pas vraiement préconisé non ??

exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<form id="f" action="" onsubmit="return test(this.elements['ch[]'])">
<p>
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un
</p>
<p>
<input type="submit" />
</p>
</form>
 
<script type="text/javascript">
 
var n;
 
function test(b){
 
	for(i=0;i!=b.length;i++){
		if(b[i].checked){
			n=true
		}
	}
 
	if (!n){
		return false
	}
 
}
 
</script>

là, j'ai un form qui ne contient qu'une série de textbox, mais peu importe;

31/08/2006, 17h08
metatron

merci j evais tester ca..en revanche avec cet exemple ca refuse juste de valider, comment s'y prendre pour afficher un message d'erreur( 'pop-up' ou texte) :

Code:

"Veuillez entrer votre $nom_attribut"

ainsi le user sait directement quel champs il a omis. Merci de l'aide.

salut,

tu affiches un alert("Veuillez entrer votre prénom!");

juste avant le return false bien sur !!!

Pour reprendre la fonction de javatwister je pense que c'est mieux de faire ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<script type="text/javascript">
 
var n = false;
 
function test(b){
 
	for(i=0;i!=b.length;i++){
		if(b[i].checked){
			n=true
		}
	}
        return n;
}
 
</script>

Cocher une liste :

Code:

1
2
3
4
5
6
7
<select name="liste">
<option select>Choisissez une option</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

Pour verifier si une option autre que "choisissez une option est selectionné :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script language="Javascript" type="text/javascript">
function verif_list() {
      with(document.nom_de_ton_formulaire) {
                if(nom_de_la_liste.selectedIndex == 0 ) {
                      alert("Veuillez choisir une option");
                      return false;
                 }
      }
}
</script>

Pour cocher des boutons radios c'est identique à la fonction que t'a donné javatwister.

Pour choisir une date :

Code:

1
2
3
4
5
6
7
8
9
10
<script language="Javascript" type="text/javascript">
function verif_date() {
          with(document.nom_de_ton_formulaire) {
                  if(nom_de_la_date.value.length < 1 ){
                       alert("Veuillez entrer une date");
                       return false;
                  }                 
          }
}
</script>

Tu peux aussi faire le test si la date est correctement formatée, pour ca va voir ici => http://www.aidejavascript.com/article66.html

04/09/2006, 10h49
metatron

re, et il n y ' pas moyen d'afficher une pop'up d'erreur correspondant au nom du champ qui a été omis ou mal saisi ! ? comme j'avais dans mon exemple au debut (sauf que a priori c'est moche d'utiliser des eval sur des textarea), avec "Veuillez renseigner le champ $nom_champ"
04/09/2006, 15h05
metatron

quelqu'un aurait une idée pour les pop up ?
04/09/2006, 15h38
Hug0_76

si tu veux afficher un popup avec l'erreur il te suffit d'ouvrir une fenetre
window.open() avec javascript!

Mais bon, pour faire une vérification d'un formulaire coté client, un simple alert("message d'erreur"); suffit! Tu ne crois pas?
04/09/2006, 15h49
metatron

wé ok...mais dans ton cas le alert("message d'erreur"); va s'afficher de quelle facon ?

ps : oui je parlais de pop-up par langage abusif, mais c bien de fenetre non-modal qui saffiche devant la page que je parlais dezo.
04/09/2006, 15h59
Hug0_76

Un alert() c'est une petite fenetre d'information où tu n'as d'autres choix que de cliquer sur "ok"!
Tu lui passes en paramètre une chaine de caractères et c'est tout!
Si tu veux en savoir d'avantage sur une fenetre alert => ici