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:

858

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
- مقالة بعنوان ابراج تعشق كثيرا - Saturday at 2:31 PM
- حديث أركان الإسلام - Saturday at 2:24 PM
- فوائد المر الأحمر - Saturday at 2:21 PM
- حكم وضع المناكير: هل يجوز وضع المناكير بعد الوضوء - Saturday at 2:17 PM
- تفتيح كعب القدم :طريقة تبييض كعب القدم - Saturday at 1:29 PM
- ما هو زواج المسيار - Saturday at 1:25 PM
- bac.men.gov.ma 2019 - Jul 15, 2019
- فروض المرحلة الرابعة المستوى الاول 2019 - Jul 15, 2019
- فروض الدورة الثانية المستوى الثاني وفق المنهاج الجديد - Jul 15, 2019
- جذاذات في رحاب اللغة العربية المستوى الثاني - Jul 15, 2019
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...

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

Share This Page

About Us

Follow us

Related Link

validation formulaire javascript

abdelouafi Administrator Staff Member

Share This Page

Useful Searches