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

Merci de partager notre contenu sur Facebook:شكرا لمشاركة المحتوى الخاص بنا على Facebook:

discussion
Solution

abdelouafi Administrator Staff Member

Messages:

2,824

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
- درس دور العضلة الهيكلية المخططة في تحويل الطاقة الثانية باكالوريا علوم زراعية (علوم الحياة والأرض) - Yesterday at 8:55 PM
- درس المواد المشعة والطاقة النووية الثانية باكالوريا علوم زراعية (علوم الحياة والأرض) - Yesterday at 8:40 PM
- درس مراقبة جودة وصحة الأوساط الطبيعية الثانية باكالوريا علوم زراعية (علوم الحياة والأرض) - Yesterday at 8:31 PM
- درس النفايات المنزلية الناتجة عن استعمال المواد العضوية الثانية باكالوريا علوم زراعية (علوم الحياة و - Yesterday at 7:54 PM
- دروس اللغة الإنجليزية الثانية باكالوريا علوم زراعية - Yesterday at 7:50 PM
- دروس الفلسفة الثانية باكالوريا علوم زراعية - Yesterday at 7:43 PM
- دروس التربية الإسلامية الثانية باكالوريا علوم زراعية - Yesterday at 7:42 PM
- دروس الفيزياء والكيمياء للسنة الثانية باكالوريا علوم زراعية - Yesterday at 7:39 PM
- دروس الرياضيات الثانية باكالوريا مسلك العلوم الزراعية - Yesterday at 7:36 PM
- دروس مادة الجغرافيا للسنة الثانية باكالوريا علوم زراعية - Yesterday at 7:32 PM
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

Merci de partager notre contenu sur Facebook:شكرا لمشاركة المحتوى الخاص بنا على Facebook:

abdelouafi Administrator Staff Member

Share This Page

About Us

Follow us

Related Link

validation formulaire javascript

Merci de partager notre contenu sur Facebook:شكرا لمشاركة المحتوى الخاص بنا على Facebook:

abdelouafi Administrator Staff Member

Share This Page

Useful Searches