This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

validation formulaire javascript

abdelouafi Jan 13, 2018

discussion
Solution

abdelouafi Administrator Staff Member

Messages:

725

Likes Received:

14

Trophy Points:

38

Joined

Sep 13, 2016

on va voir la validation du formulaire en javascript:

1- créer d'abord le formulaire suivant:

2- Créer un fonction en javascript pour vérifier la saisie du login?

3- Créer un fonction en javascript pour vérifier la saisie de l'E-mail?

4- Créer un fonction en javascript pour vérifier la saisie de l'âge?

5- Créer un fonction global en javascript pour faire une vérification globale la saisie de tous les champs?

6- Proposez une deuxième méthode pour répondre aux 5 derniers exercices??

7- Sans utiliser Javascript, vérifier la saisie de tous les champs?

Last edited: Jan 13, 2018

Jan 13, 2018
#1
Older Threads
- مستجدات تربوية 2 - Jan 10, 2018
- مستجدات تربوية 3 - Jan 10, 2018
- نظام التربية والتكوين بالمغرب page 4 - Jan 10, 2018
- نظام التربية والتكوين بالمغرب page 3 - Jan 10, 2018
- نظام التربية والتكوين بالمغرب page 2 - Jan 10, 2018
- منهجية السؤال الفلسفي صفحة 3 الخاتمة - Jan 10, 2018
- منهجية السؤال الفلسفي صفحة 2 - Jan 10, 2018
- منهجية تحليل سؤال فلسفي - Jan 10, 2018
- integration par partie comment choisir u et v - Jan 9, 2018
- puissance math formule - Jan 9, 2018
Latest Threads
- TD N° 2: diagramme use case - 2019 - Mar 13, 2019
- TD 5 : Tableau à deux dimensions - Dec 20, 2018
- 6.15 - Une introduction à std :: array C++ - Dec 10, 2018
- ‏لوكا مودريتش يفوز بالكرة الذهبية - Dec 4, 2018
- الاحتفال بيوم التعاون المدرسي - Dec 2, 2018
- 6.14 - Pointeurs vers des pointeurs et des tableaux multidimensionnels dynamiques C++ - Dec 2, 2018
- 6.13 — Void pointers C++ - Dec 2, 2018
- Boucles For-each C++ - Dec 1, 2018
- Sélection de membres avec des pointeurs et des références C++ - Dec 1, 2018
- Références et const C++ - Nov 25, 2018
Related Threads
- classe php exemple: php class constructor - exercice php avec correction Les Classes - Jun 13, 2017
- HyperText Markup Language HTML - Part 2 - Sep 21, 2016
- HyperText Markup Language HTML - Sep 27, 2016
- Cascading Style Sheets CSS - Sep 27, 2016
- Texte annimé - Javascript - Oct 4, 2016
- Opacity en CSS - Oct 4, 2016
- Permutation de deux valeurs - Fonction Javascript - Oct 4, 2016
- Affichage des données d'une table en PHP - Oct 4, 2016
- La boucle while en c - Oct 14, 2016
- Calculatrice en Javascript - calculatrice gratuit - Jan 7, 2017
- Limiter le nombre de caractères avec Javascript - Jan 7, 2017
- Réaliser un calendrier JavaScript avec un effet de transparence - Jan 7, 2017
- Formulaire en HTML Exercices corrigés HTML - Jan 8, 2017
- qatar visa requirements - Nov 24, 2017
- jquery pour les nuls pdf - Nov 29, 2017
- Efm applications hypermédias 2015 2016: exelib hypermedia - Dec 8, 2017
- modification de formulaire afficher le précédent choix liste déroulante bdd - Jun 9, 2018
- cacher le code javascript: protéger le code javascript - Jun 9, 2018
- JavaScript peut changer le contenu HTML - Nov 1, 2018
- Javascript : où insérer le code source? - Nov 2, 2018
- La Sortie JavaScript: affichage des résultats - Nov 2, 2018
- Déclarations JavaScript: variable local et global - Nov 2, 2018
- Syntaxe JavaScript - Nov 2, 2018
- Commentaires JavaScript: organiser son code par balise commentaires javascript - Nov 2, 2018
- Variables JavaScript: type de variable javascript - Nov 2, 2018
- Opérateurs JavaScript: opérateur ternaire javascript - Nov 2, 2018
- Opérateurs arithmétiques - JavaScript - Nov 2, 2018
- Affectation JavaScript - Nov 2, 2018
- Types de données JavaScript - Nov 2, 2018
- Fonctions JavaScript return: liste des fonctions - Nov 2, 2018
Loading...

Merci de partager ce post sur facebook
Merci d'aimer notre facebook page

Code:

<!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" />
<title>Validation d'un formulaire :</title>
<script>


function souligner(champ, erreur)
{
    if(erreur)
        champ.style.background="#fba";
    else
            champ.style.background="";
}

// fonction qui vérifie le login saisie

function veriflogin(par1)
{
    if(par1.value.length<2 || par1.value.length>30)
    {
        souligner(par1,true);
     
        par1.value="login court ou plus long";
        return false;
    }
    else
    {
        souligner(par1,false);
        return true; 
    }
}


//fonction qui vérifié l'age

function verifage(par)
{
    var x=parseInt(par.value);
    if(x<=0 || x>150)
        {
            souligner(par, true);
            par.value="age incorrect";
            return false;
        }
    else
        {
            souligner(par, false);
            return true;
        }
     
}


//fonction qui vérifie l'email
function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      souligner(champ, true);
      return false;

   }
   else
   {
      souligner(champ, false);
      return true;
   }
}

// Vérifier le formulaire avant l'envoie


function verifForm(par)
{
    var loginok= veriflogin(par.logi);
    var emailok=verifMail(par.email);
    var ageok=verifage(par.a1);
 
    if(loginok && emailok && ageok)
        {return true;}
     
    else
    {
     
        alert("erreur");
        return false;
     
    }
}

</script>


</head>

<body>


  <form action="" onsubmit="return verifForm(this)">
  <p>
    Login : <input type="text" name="login"  onblur="veriflogin(this)" /><br /><br />
    E-mail : <input type="text" name="email"  size="30" onblur="verifMail(this)" /><br /><br />
    Âge : <input type="text" name="age"  size="2" onblur="verifage(this)" /> ans<br /><br />
    <input type="submit" value="Valider" />
  </p>
</form>

</body>
</html>

Méthode 2:

Code:

<!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" />
<title>Validation d'un formulaire :</title>
<script>

function verifForm()
{
    var x=document.f1.login.value;
    if(x=="")
    {
        f1.login.style.background="#fa0";
        f1.login.value="login obligatoire"
        return false;
    }
  
  
  
    //vérifie l'age
  
    var a=document.f1.age.value;
    if(a=="")
    {
        f1.age.style.background="#fa0";
        f1.age.value="age obligatoire"
        return false;
    }
  
    //vérifie l'email
  
    var em=document.f1.email.value;

  
    var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(f1.email.value))
   {
      f1.email.style.background="#fa0";
        f1.email.value="email obligatoire"
      return false;

   }

       if(em=="")
    {
        f1.email.style.background="#fa0";
        f1.email.value="email obligatoire"
        return false;
    }
  
  
  
}

</script>


</head>

<body>


  <form name="f1" action="" onsubmit="return verifForm()">
  <p>
    Login : <input type="text" name="login" /><br /><br />
    E-mail : <input type="text" name="email"  size="30"  /><br /><br />
    Âge : <input type="text" name="age"  size="10"/> ans<br /><br />
    <input type="submit" value="Valider" />
  </p>
</form>

</body>
</html>

Code:

<!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" />
<title>Untitled Document</title>
</head>

<body>
<form action="" method="post">
  Login: <input type="text" name="nom" required><br /><br />
  E-mail:<input type="text" name="email" required><br /><br />
  Age:<input type="text" name="age" required><br /><br />
 
  <input type="submit" value="Submit">
</form>
</body>
</html>

(You must log in or sign up to reply here.)

Tags:

validation formulaire javascript

abdelouafi Administrator Staff Member

Merci de partager ce post sur facebook

Merci d'aimer notre facebook page

Share This Page

About Us

Follow us

Notre Politique

Contact Us

validation formulaire javascript

abdelouafi Administrator Staff Member

Merci de partager ce post sur facebook

Merci d'aimer notre facebook page

Share This Page

Useful Searches