Introduction aux formulaires en JavaScript

JavaScript est un langage de programmation utilisé couramment dans les applications Web pour calculer, manipuler et valider des données, créer des pages dynamiques et interagir avec l'utilisateur. Étant donné que JavaScript a de nombreux cas d'utilisation, dans cet article, nous allons découvrir les formulaires et la validation des formulaires via JavaScript.

Avec l'aide de JavaScript, nous pouvons améliorer, valider le formulaire HTML et ses éléments côté client sans même invoquer le serveur. JavaScript peut garantir que toutes les exigences sont remplies par l'utilisateur avant de soumettre le formulaire au programme d'application.

Comme nous pouvons valider le formulaire côté client, le traitement des données devient plus rapide par rapport à la validation côté serveur. La plupart des développeurs Web utilisent la validation de formulaire JavaScript.

Formulaire et validation de formulaire en JavaScript

Les formulaires sont une section importante de toute application Web pour collecter des informations, des commentaires ou des requêtes des utilisateurs. Grâce à JavaScript, nous pouvons offrir une meilleure expérience utilisateur en affichant les résultats à l'utilisateur de manière efficace.

Les éléments les plus couramment utilisés dans les formulaires pour collecter des données sont:

  • Zone de texte: pour saisir un texte
  • Bouton poussoir: pour effectuer une action
  • Boutons radio: pour sélectionner une option parmi un groupe d'options
  • Cases à cocher: pour sélectionner ou désélectionner une seule option indépendante

Lors de la mise en œuvre de formulaires, nous devons fournir un nom à notre formulaire et aux éléments que nous avons utilisés dans notre formulaire, car les noms que nous avons attribués nous aident à référencer ces objets (formulaire et ses éléments) dans notre JavaScript.

Un formulaire typique ressemble à celui illustré ci-dessous,

Code:



Remarque: J'ai fourni des attributs NAME = pour tous les éléments du formulaire, y compris le formulaire lui-même.

Le formulaire JavaScript utilise des gestionnaires d'événements, tels que onClick ou onSubmit pour appeler une action JavaScript lorsque l'utilisateur effectue une action dans le formulaire, comme cliquer sur un bouton.

Exemple de collecte et de validation des informations utilisateur en JavaScript

L'implémentation du code pour collecter et valider les informations utilisateur est donnée ci-dessous.

1. index.html

Code:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Code:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Code:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Sortie n ° 1: entrée utilisateur correcte

Sortie n ° 2: informations d'identification utilisateur erronées / manquantes

  • index.html: crée le formulaire.
  • validate.js: valide le formulaire.
  • form-style.css: conçoit la disposition du formulaire.

Les données saisies dans le formulaire doivent être dans le format correct tel que requis par la demande et certains champs doivent obligatoirement être remplis afin de soumettre le formulaire.

Conclusion

Dans cet article, nous avons appris le formulaire et les différents éléments ou contrôles utilisés dans les formulaires et le rôle que JavaScript joue dans la validation du formulaire, la vérification des données saisies par l'utilisateur, les fonctions de gestion des événements lorsqu'une action est effectuée comme cliquer sur un bouton et ses avantages.

Articles recommandés

Ceci est un guide des formulaires en JavaScript. Nous expliquons ici comment collecter et valider les informations utilisateur avec des exemples appropriés. Vous pouvez également consulter les articles suivants pour en savoir plus-

  1. Encapsulation en JavaScript (Fonctionnement, Avantages)
  2. Étapes pour créer des objets en JavaScript
  3. Logique pour rechercher inverse en JavaScript avec des exemples
  4. Top 6 des compilateurs en JavaScript
  5. Guide complet de la case à cocher dans Bootstrap
  6. Types de formulaires dans React avec des exemples
  7. Guide de validation des formulaires HTML avec des exemples

Catégorie:

Développement de logiciels