Validation de Formulaire en Utilisant JavaScript
Les formulaires web font une partie essentielle des applications web. Elles sont utilisées pour ramasser les informations de l'utilisateur telles que le nom, l'adresse électronique, la location, l'age, etc.. Mais parfois les utilisateurs ne saisissent pas les détails attendus. Donc il est très important de valider les données de formulaire avant les envoyer au côté serveur. Pour la validation de formulaire, JavaScript de côté client peut nous aider.
La validation de la formulaire vérifie la précision de l'information de l'utilisateur avant envoyer la formulaire.
JavaScript fournit une validation de formulaire de côté client plus rapide que celle de côté serveur. La validation de côté serveur demande plus de temps en se produisant premièrement sur le serveur, ce qui demande la saisie de l'utilisateur pour être envoyé au serveur avant la validation. Donc, la validation de côté client aide à créer une mieux expérience d'utilisateur. Beaucoup de dévelopeurs préfèrent la validation de formulaire JavaScript.
Dans ce tutoriel, nous allons vous montrer comment valider la formulaire avec JavaScript.
1. Créer une Formulaire HTML.
Créez une formulaire HTML qui sera validée en utilisant JavaScript lorsque l'utilisateur clique sur le bouton "envoyer". Ici on utilise les balises <form>, <label>, <input>, <textarea>, <option>. Ci-dessous, nous montrons ce que vous devez faire pour que votre HTML soit correct.
<body>
<h2 style="text-align: center;">Formulaire d'inscription</h2>
<form name="RegForm" action="/submit.php" onsubmit="return W3docs()" method="post" class="w3docs">
<div>
<label for="Nom">Nom:</label>
<input type="text" id="Nom" size="60" name="Nom" />
</div>
<br />
<div>
<label for="adresse">Adresse:</label>
<input type="text" id="adresse" size="60" name="Adresse" />
</div>
<br />
<div>
<label for="E-mail" l>Adresse électronique:</label>
<input type="text" id="E-mail" size="60" name="Email" />
</div>
<br />
<div>
<label for="Mot de passe">Mot de passe:</label>
<input type="text" id="Mot de passe" size="60" name="Mot de passe" />
</div>
<br />
<div>
<label for="Téléphone">Téléphone: </label>
<input type="text" id="Téléphone" size="60" name="Téléphone" />
</div>
<br />
<div>
<label>Sélectionnez le Livre</label>
<select type="text" value="" name="Sujet">
<option></option>
<option>HTML</option>
<option>CSS</option>
<option>PHP</option>
<option>JavaScript</option>
</select>
</div>
<br />
<div>
<label for="commentaire">Commentaires: </label>
<textarea cols="62" id="commentaire" rows="10" name="Commentaire"></textarea>
</div>
<div class="buttons">
<input type="submit" value="Envoyer" name="Envoyer" />
<input type="reset" value="Rénit" name="Reset" />
</div>
</form>
</body>2. Ajoutez CSS.
Dans la section style nous allons définir un style pour notre formulaire à l'aide des propriétés CSS.
<style>
.w3docs {
margin-left: 70px;
font-weight: bold;
text-align: left;
font-family: sans-serif, bold, Arial, Helvetica;
font-size: 14px;
}
.buttons {
display: flex;
align-items: center;
width: 100%;
}
div input {
margin-right: 10px;
}
form {
margin: 0 auto;
width: 600px;
}
form input {
padding: 10px;
}
form select {
background-color: #ffffff;
padding: 5px;
}
form textarea {
padding: 10px;
margin-bottom: 5px;
}
form label {
display: block;
width: 100%;
margin-bottom: 5px;
}
</style>Validation de formulaire en utilisant JavaScript
Maintenant nous allons créer un code Javascript qui validera notre formulaire.
Dans cet exemple, nous allons valider le nom, mot de passe, e-mail, téléphone, sujet, et l'adresse.
Passez attentivement par chaque ligne de l'exemple de code suivant pour comprendre comment la validation JavaScript fonctionne:
function W3docs()
{
var name = document.forms["RegForm"]["Nom"];
var email = document.forms["RegForm"]["Email"];
var phone = document.forms["RegForm"]["Téléphone"];
var what = document.forms["RegForm"]["Sujet"];
var password = document.forms["RegForm"]["Mot de passe"];
var address = document.forms["RegForm"]["Adresse"];
var comment = document.forms["RegForm"]["Commentaire"];
if (name.value == "")
{
alert("Mettez votre nom.");
name.focus();
return false;
}
if (address.value == "")
{
alert("Mettez votre adresse.");
address.focus();
return false;
}
if (email.value == "")
{
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (phone.value == "")
{
alert("Mettez votre numéro de téléphone.");
phone.focus();
return false;
}
if (password.value == "")
{
alert("Saisissez votre mot de passe");
password.focus();
return false;
}
if (what.selectedIndex < 1)
{
alert("Mettez votre cours.");
what.focus();
return false;
}
if (comment.value == "")
{
alert("Écrivez un commentaire.");
comment.focus();
return false;
}
return true;
}Voyons comment nous avons créée une formulaire validée à l'aide de HTML, CSS, et JavaScript. Il est très facile si vous suivez aux étapes ci-dessous.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.w3docs {
margin-left: 70px;
font-weight: bold;
text-align: left;
font-family: sans-serif, bold, Arial, Helvetica;
font-size: 14px;
}
.buttons {
display: flex;
align-items: center;
width: 100%;
}
div input {
margin-right: 10px;
}
form {
margin: 0 auto;
width: 600px;
}
form input {
padding: 10px;
}
form select {
background-color: #ffffff;
padding: 5px;
}
form textarea {
padding: 10px;
margin-bottom: 5px;
}
form label {
display: block;
width: 100%;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Formulaire d'inscription</h2>
<form name="RegForm" action="/submit.php" onsubmit="return W3docs()" method="post" class="w3docs">
<div>
<label for="Nom">Nom:</label>
<input type="text" id="Nom" size="60" name="Nom" />
</div>
<br />
<div>
<label for="adresse">Adresse:</label>
<input type="text" id="adresse" size="60" name="Adresse" />
</div>
<br />
<div>
<label for="E-mail" l>Adresse électronique:</label>
<input type="text" id="E-mail" size="60" name="Email" />
</div>
<br />
<div>
<label for="Mot de passe">Mot de passe:</label>
<input type="text" id="Mot de passe" size="60" name="Mot de passe" />
</div>
<br />
<div>
<label for="Téléphone">Téléphone: </label>
<input type="text" id="Téléphone" size="60" name="Téléphone" />
</div>
<br />
<div>
<label>Sélectionnez le Livre</label>
<select type="text" value="" name="Sujet">
<option></option>
<option>HTML</option>
<option>CSS</option>
<option>PHP</option>
<option>JavaScript</option>
</select>
</div>
<br />
<div>
<label for="commentaire">Commentaires: </label>
<textarea cols="62" id="commentaire" rows="10" name="Commentaire"></textarea>
</div>
<div class="buttons">
<input type="submit" value="Envoyer" name="Envoyer" />
<input type="reset" value="Réinitialiser" name="Réinitialiser" />
</div>
</form>
<script>
function W3docs() {
var name = document.forms["RegForm"]["Nom"];
var email = document.forms["RegForm"]["Email"];
var phone = document.forms["RegForm"]["Téléphone"];
var what = document.forms["RegForm"]["Sujet"];
var password = document.forms["RegForm"]["Mot de passe"];
var address = document.forms["RegForm"]["Adresse"];
var comment = document.forms["RegForm"]["Commentaire"];
if (name.value == "") {
alert("Mettez votre nom.");
name.focus();
return false;
}
if (address.value == "") {
alert("Mettez votre adresse.");
address.focus();
return false;
}
if (email.value == "") {
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0) {
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
alert("Mettez une adresse email valide.");
email.focus();
return false;
}
if (phone.value == "") {
alert("Mettez votre numéro de téléphone.");
phone.focus();
return false;
}
if (password.value == "") {
alert("Saisissez votre mot de passe");
password.focus();
return false;
}
if (what.selectedIndex < 1) {
alert("Mettez votre cours.");
what.focus();
return false;
}
if (comment.value == "") {
alert("Écrivez un commentaire.");
comment.focus();
return false;
}
return true;
}
</script>
</body>
</html>