Validation formulaire javascript

eli -
Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention - 22 mars 2017 à 08:43

Bonjour,
j'ai un formulaire javascript dans une de mes pages html et j'aimerais ajouter un bouton de validation. alors si les champs entré ne respecte pas les conditions : un message d'erreur apparait a côté des champs mal écrit et l'encadrer est en rouge.

voici mon code.
merci

<html>

<!-- Date de création: 2017-03-21 -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Exemples pour le cours INF-1001 UQTR</title>

<meta name="description" content="formulaire">

<meta name="keywords" content="Code HTML, programmation HTML">

<meta name="author" content="Élisabeth">

<meta name="generator" content="Editra">

<basefont face="Verdana" color="darkblue" size=4>

</head>

<body lang=fr BGCOLOR ="lightyellow">


<Table  align=center border=2  width=600 cellpadding=5>

<tr>

<td>

<CENTER>

<H1>Exemples de formulaire</H1>

</CENTER>

<form action="mailto:***@***" method="post">


Code postal:
<input type="text" name="codepostal" size="40" maxlength="256" onSubmit="return verif()" />

<p> </p>
<script>
    // valide un code postal canadien
// input: code postal
// output: vrai ou faux
function CodePostalValide(id) {
  entry=document.getElementById(id).value;
  strlen=entry.length;
  if(strlen!==6) {
    return false;
  }
// au cas où il a été entré en minuscules
entry=entry.toUpperCase();
// valeurs permises
s1='ABCEGHJKLMNPRSTVXY';
s2=s1+'WZ';
d3='0123456789';

// compare, une par une, les valeurs entrées à celles permises
if(s1.indexOf(entry.charAt(0))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(1))<0){
  return false;
  }
if(s2.indexOf(entry.charAt(2))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(3))<0){
  return false;
  }
if(s2.indexOf(entry.charAt(4))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(5))<0){
  return false;
  }

<div class="form-group">
   <label for="pcodeca1" class="required"><span class="field-name">Code postal</span> <strong class="required">(obligatoire)</strong></label>
   <input class="form-control" id="pcodeca1" name="pcodeca1" type="text" required="required" data-rule-postalCodeCA="true" />
  </div>
    </script>


Votre nom :

<input type="text" name="Nom" size="40" maxlength="256" />

<p> </p>

Un mot de passe:  <br />

<input type="text"  name="motdepasse" size="10" maxlength="6" />

<p> </p>

Corps du message: <br>

<textarea name="Corps" cols="60" rows="8" wrap="physical">

</textarea>

<p> </p>

Votre sexe:

<input type="checkbox" name="Sexe" value="Masculin" /> Masculin

<input type="checkbox" name="Sexe" value="Féminin" /> Féminin

<input type="checkbox" name="Sexe" value="Indécis" /> Indécis

<p> </p>

Votre sexe:<br />

<blockquote>

<input type="radio" name="Sexe1" value="Masculin" /> Masculin<br />

<input type="radio" name="Sexe1" value="Féminin" /> Féminin<br />

<input type="radio" name="Sexe1" value="Indécis" /> Indécis<br />

</blockquote>

<p> </p>

Votre province:

<select name="Province" >

<option value="Choisir dans la liste" selected="selected"> Choisir dans la liste</option>

<option value="Alberta"> Alberta</option>

<option value="Ontario"> Ontario</option>

<option value="Québec"> Québec</option>

<option value="Saskatchewan"> Saskatchewan</option>

<option value="Manitoba"> Manitoba</option>

<option value="Newfoundland"> Terre-Neuve et Labrador</option>

</select>

<p> </p>

Quels sont vos activités préférées:  <br />

<p align="center">

<select name="Activites"  size="8" multiple="2">

<option value="Cyclisme"> Cyclisme</option>

<option value="Natation"> Natation</option>

<option value="Ski de fond"> Ski de fond</option>

<option value="Ski alpin"> Ski alpin</option>

<option value="Randonnée"> Randonnée pédestre</option>

<option value="Snowboard"> Planche à neige</option>

<option value="Patins à roues alignées"> Patins à roues alignées</option>

<option value="Canotage"> Canot-Kayak</option>



</select>

</p>

<p> </p>


<p align=center>

<input type="reset" value="Recommencer" />

<input type="submit" value="Envoyer" />

</p>


</form>

<SCRIPT language="javascript">
<!--
var derniereModif=document.lastModified;
var dateModif = new Date(derniereModif);
var jour = dateModif.getDate();
var mois=dateModif.getMonth()+1;
var annee=dateModif.getYear()+1900;
var heures=dateModif.getHours();
var minutes=dateModif.getMinutes();

if (mois == 1)
    { var moisc="janvier" ; }
if (mois == 2)
    { var moisc="février" ; }
if (mois == 3)
    { var moisc="mars" ; }
if (mois == 4)
    { var moisc="avril" ; }


document.write("Derniere modification le ");
document.write(jour+"/"+moisc+"/"+annee+" a "+heures+":"+minute);

//-->
</SCRIPT>


</td>

</tr>

</table>

</body>

</html>

EDIT : Ajout des balises de code

Afficher la suite

1 réponse

Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention 434

Il y a plusieurs erreurs. Lorsque tu exécutes ton code dans ton navigateur, n'hésite pas à regarder si ton code ne contient pas d'erreurs, généralement, il faut appuyer sur F12.

ligne 49: tu as ouvert une accolade et elle n'est pas fermée, il faut donc la fermer à la ligne 81.

ligne 88: la balise </script> doit être à la ligne 82.

ligne 220: il manque un s à minute.

<html>

<!-- Date de création: 2017-03-21 -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Exemples pour le cours INF-1001 UQTR</title>

<meta name="description" content="formulaire">

<meta name="keywords" content="Code HTML, programmation HTML">

<meta name="author" content="Élisabeth">

<meta name="generator" content="Editra">

<basefont face="Verdana" color="darkblue" size=4>

</head>

<body lang=fr BGCOLOR ="lightyellow">

<Table  align=center border=2  width=600 cellpadding=5>

<tr>

<td>

<CENTER>

<H1>Exemples de formulaire</H1>

</CENTER>

<form action="mailto:***@***" method="post">

Code postal:
<input type="text" name="codepostal" size="40" maxlength="256" onSubmit="return verif()" />

<p> </p>
<script>
    // valide un code postal canadien
// input: code postal
// output: vrai ou faux
function CodePostalValide(id) {
  entry=document.getElementById(id).value;
  strlen=entry.length;
  if(strlen!==6) {
    return false;
  }
// au cas où il a été entré en minuscules
entry=entry.toUpperCase();
// valeurs permises
s1='ABCEGHJKLMNPRSTVXY';
s2=s1+'WZ';
d3='0123456789';

// compare, une par une, les valeurs entrées à celles permises
if(s1.indexOf(entry.charAt(0))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(1))<0){
  return false;
  }
if(s2.indexOf(entry.charAt(2))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(3))<0){
  return false;
  }
if(s2.indexOf(entry.charAt(4))<0){
  return false;
  }
if(d3.indexOf(entry.charAt(5))<0){
  return false;
  }
  }
  </script>SCRIPT>
<div class="form-group">
   <label for="pcodeca1" class="required"><span class="field-name">Code postal</span> <strong class="required">(obligatoire)</strong></label>
   <input class="form-control" id="pcodeca1" name="pcodeca1" type="text" required="required" data-rule-postalCodeCA="true" />
  </div>

Votre nom :

<input type="text" name="Nom" size="40" maxlength="256" />

<p> </p>

Un mot de passe:  <br />

<input type="text"  name="motdepasse" size="10" maxlength="6" />

<p> </p>

Corps du message: <br>

<textarea name="Corps" cols="60" rows="8" wrap="physical">

</textarea>

<p> </p>

Votre sexe:

<input type="checkbox" name="Sexe" value="Masculin" /> Masculin

<input type="checkbox" name="Sexe" value="Féminin" /> Féminin

<input type="checkbox" name="Sexe" value="Indécis" /> Indécis

<p> </p>

Votre sexe:<br />

<blockquote>

<input type="radio" name="Sexe1" value="Masculin" /> Masculin<br />

<input type="radio" name="Sexe1" value="Féminin" /> Féminin<br />

<input type="radio" name="Sexe1" value="Indécis" /> Indécis<br />

</blockquote>

<p> </p>

Votre province:

<select name="Province" >

<option value="Choisir dans la liste" selected="selected"> Choisir dans la liste</option>

<option value="Alberta"> Alberta</option>

<option value="Ontario"> Ontario</option>

<option value="Québec"> Québec</option>

<option value="Saskatchewan"> Saskatchewan</option>

<option value="Manitoba"> Manitoba</option>

<option value="Newfoundland"> Terre-Neuve et Labrador</option>

</select>

<p> </p>

Quels sont vos activités préférées:  <br />

<p align="center">

<select name="Activites"  size="8" multiple="2">

<option value="Cyclisme"> Cyclisme</option>

<option value="Natation"> Natation</option>

<option value="Ski de fond"> Ski de fond</option>

<option value="Ski alpin"> Ski alpin</option>

<option value="Randonnée"> Randonnée pédestre</option>

<option value="Snowboard"> Planche à neige</option>

<option value="Patins à roues alignées"> Patins à roues alignées</option>

<option value="Canotage"> Canot-Kayak</option>

</select>

</p>

<p> </p>

<p align=center>

<input type="reset" value="Recommencer" />

<input type="submit" value="Envoyer" />

</p>

</form>

<SCRIPT language="javascript">
<!--
var derniereModif=document.lastModified;
var dateModif = new Date(derniereModif);
var jour = dateModif.getDate();
var mois=dateModif.getMonth()+1;
var annee=dateModif.getYear()+1900;
var heures=dateModif.getHours();
var minutes=dateModif.getMinutes();

if (mois == 1)
    { var moisc="janvier" ; }
if (mois == 2)
    { var moisc="février" ; }
if (mois == 3)
    { var moisc="mars" ; }
if (mois == 4)
    { var moisc="avril" ; }

document.write("Derniere modification le ");
document.write(jour+"/"+moisc+"/"+annee+" a "+heures+":"+minutes);

//-->
</SCRIPT>

Validation formulaire javascript

EDIT : Ajout des balises de code

1 réponse

Discussions similaires

Newsletters