Scribd
Importer
160 vues15 pages

TP3 JavaScript

Transféré par

Yamina Gh
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
160 vues15 pages

TP3 JavaScript

Transféré par

Yamina Gh
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 15

Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

TP3 : Le Tutoriel de Javascript Form

Validation
Très régulièrement, vous rencontrez un website où des utilisateurs saisissent des informations dans
un formulaire (form) avant de les envoyer au serveur, par exemple, le formulaire d'enregistrement
de compte. Les informations que l'utilisateur saisit dans le formulaire doivent être validées (validate)
pour assurer la rationalité des données.

Quelques exemples d'authentification :

 Vérifier que les données ne sont pas vides.


 Vérifier le format des courriels
 Vérifiez le format de numéro de téléphone
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

 ..

Il y a fondamentalement trois façons de valider les données :

1. Des données de form seront envoyées au server (serveur), et la validation (validate) se


fera du côté serveur.
2. Des données de form seront validées du côté client en utilisant Javascript, ce qui permet
au server de ne pas avoir à travailler trop et d'augmenter les performances de l'application.
3. Utiliser toutes les deux méthodes ci-dessus pour valider form.

Dans cette leçon, je discuterai de l'utilisation de Javascript pour valider (validate) form.
L'illustration ci-dessous illustre le comportement du programme lorsque l'utilisateur clique sur le
bouton Submit.

1. Vous devez enregistrer une fonction en combinaison avec l'événement onsubmit de form.
Le devoir de cette fonction est de vérifier les données qu'un utilisateur a saisi dans
le form et de renvoyer true si toutes les informations entrées par l'utilisateur est valide et
vice versa renvoyer false.
2. Lorsque l'utilisateur clique sur Submit, la fonction en combinaison avec
l'événement onsubmit sera appelée.
3. Si la fonction en combinaison avec l'événement onsubmit renvoie true, des données
de form seront envoyées au server. Si non, l'action Submit sera annulée.

1. Exemple simple

Ceci est un exemple simple qui vous permet de comprendre les règles de fonctionnement
de Form avant de pratiquer des exemples plus complexes.
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

L'attribut (attribute) action de <form> est de spécifier la page à laquelle les données seront données
ou, en d'autres termes, la page qui traitera les données envoyées depuis le <form> de la page en
cours.
Les pages traitant les données envoyées à partir du form sont généralement écrites par Servlet/
JSP, la technologie PHP ou une technologie du côté Server au lieu d’une page HTML. Pourtant
je ne mentionne pas le traitement des données dans cette leçon.
simple-validation-example.html

<!DOCTYPE html>
<html>
<head>
<title>Hello Javascript</title>
<script type = "text/javascript">
function validateForm() {
var u = document.getElementById("username").value;
var p = document.getElementById("password").value;
if(u== "") {
alert("S'il vous plaît entrez votre nom d'utilisateur");
return false;
}
if(p == "") {
alert("Veuillez entrer votre mot de passe");
return false;
}
alert("Toutes les données sont valides !, envoyez-le au serveur!")
return true;
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

}
</script>
</head>
<body>

<h2>Entrez votre pseudo et votre mot de passe</h2>

<div style="border:1px solid #ddd; padding: 5px;">


<form method="POST" action="" onsubmit = "return validateForm()">
Pseudo: <input type="text" name="username" id="username"/>
<br><br>
Password: <input type="password" name = "password" id="password"/>
<br><br>
<button type="submit">Submit</button>
</form>
</div>

</body>
</html>

process-action.html
<!DOCTYPE html>
<html>
<head>
<title>Process Action</title>

</head>
<body>

<h3>Process Action Page</h3>

OK, j'ai des données!

<br/><br/>

<a href="javascript:history.back();">[Go Back]</a>

</body>
</html>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

2. Accéder aux données de form


Accédez aux données du champ (field) via ID du champ.

<input type="text" id="username"/>


<input type="password" id="password"/>

// Champ d'accès via ID:


var champ = document.getElementById("IdChamp");

var value = champ.value;

Accédez aux champs de Form via l'attribut name :

<form name="myForm" ...>


<input type="text" name="username"/>
<input type="password" name = "password"/>
<button type="submit">Submit</button>
</form>

// Obtenir le formulaire via le nom du formulaire:


var myForm = document.forms["myForm"];

var u = myForm["username"].value;
var p = myForm["password"].value;

Lorsqu'un utilisateur saisit des données inexactes dans un champ de form, vous devez en informer
l'utilisateur et focus sur ce champ.
validation-example1.html
<!DOCTYPE html>
<html>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

<head>
<title>Validation</title>
<script type = "text/javascript">

function validateForm() {
// Get form via form name:
var myForm = document.forms["myForm"];

var u = myForm["username"].value;
var p = myForm["password"].value;

if(u== "") {
alert("Please enter your Username");
myForm["username"].focus(); // Focus
return false;
}
if(p == "") {
alert("Please enter you Password");
myForm["password"].focus(); // Focus
return false;
}

alert("All datas are valid!, send it to the server!")

return true;
}
</script>
</head>
<body>

<h2>Enter your Username and Password</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" method="GET" action="process-


action.html" onsubmit = "return validateForm()">
Username: <input type="text" name="username"/>
<br><br>
Password: <input type="password" name = "password"/>
<br><br>
<button type="submit">Submit</button>
</form>

</div>

</body>
</html>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

Exemple : Demandez à un utilisateur de saisir un nombre entre 0 et 10.


validation-number-example.html
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type = "text/javascript">

function validateForm() {

var myField = document.getElementById("myNumber");


var value = myField.value;

if( value == "" || isNaN(value) || value < 0 || value > 10) {


alert("Invalid input!");
myField.focus();
return false;
}

return true;
}
</script>
</head>
<body>

<h2>Enter a Number between 0 and 10</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-


action.html" onsubmit = "return validateForm()">
Number: <input type="text" id= "myNumber"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
</html>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

3. Submit via Javascript


Cliquer sur le bouton <button type="submit"> ou <input type="submit"> à l'intérieur
du form vous permet d'envoyer les données de ce form au serveur, cependant, vous pouvez aussi
le faire par Javascript.

javascript-submit-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Submit</title>
<script type = "text/javascript">

function validateForm() {
var name = document.forms["myForm"]["fullName"]
.value;
if(name == "") {
alert("Please enter your name");
return false;
}
return true;
}

function submitByJavascript() {

var valid = validateForm();


if(!valid) {
return;
}
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

var myForm = document.forms["myForm"];

myForm.submit();
}
</script>
</head>
<body>

<h2>Submit a from with Javascript</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-


action.html" onsubmit = "return validateForm()">
Your Name: <input type="text" name = "fullName" value =""/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>
<br/>

<!-- A Button outside the form -->


Button outside the form:
<button onclick="submitByJavascript()">Click Me to submit form</button>

</body>
</html>

4. Validater automatiquement
Le navigateur peut valider (validate) automatiquement plusieurs types de données sur le form, par
exemple en ajoutant un attribut required à un champ du form pour indiquer au navigateur que ce
champ est obligatoire. Le navigateur vérifiera et avertira automatiquement un utilisateur si un
utilisateur n'entre pas dans ce champ.
Remarque : Des navigateurs trop anciens comme IE version 9 ou plus ancien ne supportent pas
la validate automatique.
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

required-example.html
<!DOCTYPE html>
<html>
<head>
<title>Required</title>

</head>
<body>

<h2>Required attribute</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-


action.html" onsubmit = "return validateForm()">
Your Name: <input type="text" name = "fullName" value ="" required/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
</html>

Quelques éléments <input> sont récemment introduits dans HTML 5, par exemple color, date,
datetime-local, email, month, number, range, search, tel, time, url, week,. Ces éléments ont des
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

attributs (attribute) spéciaux pour permettre au navigateur de savoir


comment validate automatiquement ses données. Voici une liste de certains de ces attributs :
Attribut Description
disabled Spécifie que l'élément Input doit être désactivé (disabled).
max Spécifie la valeur maximale d'un élément Input.
min Spécifie la valeur minimale d'un élément Input.
pattern Spécifie la valeur pattern d'un élément Input.
Spécifie que le champ Input est obligatoire. L'utilisateur doit saisir des
required
données.
type Spécifie le type de l'élément Input.
Voir le détail de la liste des éléments et attributs <input> correspondant à chacun de ces éléments
:

 TODO Link!

Exemple : Un élément <input type="number"> avec des attributs min, max, le


navigateur avertira l'utilisateur s'il saisit un numéro au-delà de la zone autorisée.
attr-min-max-example.html
<!DOCTYPE html>
<html>
<head>
<title>Min Max Attributes</title>

</head>
<body>

<h2>Attribute min, max</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-action.html">


Enter your score (0-100):
<input type="number" name = "score" min= "0" max = "100"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
</html>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

Exemple : Demander au utilisateur de saisir un code de pays de 2 caractères.


attr-pattern-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>

</head>
<body>

<h2>Attribute: pattern</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-action.html">


Country code:
<input type="text" name = "countryCode" pattern="[A-Za-z]{2}"
title="Two letter country code"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

</html>

Exemple : Demander au utilisateur de saisir le mot de passe qui contient au moinss 8 caractères.
attr-pattern-example2.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>

</head>
<body>

<h2>Attribute: pattern</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-action.html">


Password:
<input type="password" name = "password" pattern=".{8,}"
title="8 or more characters"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

Exemple: Demander à un utilisateur de saisir un mot de passe fort, comportant au moins 8


caractères, au moins une majuscule (uppercase) et au moins une minuscule (lowercase).
attr-pattern-password-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>

</head>
<body>

<h2>Attribute: pattern</h2>
Le mot de passe doit contenir au moins 8 caractères d'au moins un chiffre et
une lettre majuscule et minuscule:
<br/><br/>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-action.html">


Password:
<input type="password" name = "password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Invalid password!"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
Polytechnique Sousse (2020-2021) Doctorante : Yamina Ghobni

</html>

Exemple : Demander à un utilisateur de saisir une adresse email, utiliser l'attribut pattern pour
vous assurer que l'utilisateur saisit un email dans le bon format.

attr-pattern-email-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>

</head>
<body>

<h2>Attribute: pattern</h2>

<div style="border:1px solid #ddd; padding: 5px;">

<form name="myForm" action="process-action.html">


Email:
<input type="email" name = "email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
title="Invalid Email!"/>
<br/><br/>
<button type="submit">Submit</button>
</form>

</div>

</body>
</html>

Vous aimerez peut-être aussi