Validation de formulaire JavaScript - Différents types de validation de formulaire javascript

Introduction à la validation de formulaire JavaScript

La validation de formulaire effectue la vérification de l'exactitude des formulaires créés et vérifie si les informations soumises par l'utilisateur sont correctes. La validation des formulaires se fait généralement côté serveur, une fois les informations requises saisies par le client. Après la validation du formulaire, s'il y a des informations incorrectes ou un champ laissé vide. Ensuite, le serveur enverrait le message au client que les informations entrées sont incorrectes ou manquantes. La validation des formulaires donne la confiance aux clients que toutes les informations saisies seraient correctes, sinon une erreur serait levée afin de pouvoir les corriger.

Exemple:

function validate() (
var y = document.forms("Form")("f.name").value;
if (y == "")
(
alert("Name filed is empty");
return false;
)
)

Éléments à vérifier lors de la validation de formulaire

• Vérifiez si l'utilisateur a laissé le champ vide qui doit être rempli. S'il est vide, renvoyez «Message d'alerte».
• Vérifiez si l'utilisateur a entré un nombre où la valeur numérique doit être entrée. Par exemple, les coordonnées.
• Vérifiez si l'utilisateur a entré un caractère alphabétique dans le champ du nom.
• Vérifiez le caractère numérique et alphabétique. Si le champ du formulaire est alphanumérique. Par exemple, le champ du message.
• Vérifiez si l'utilisateur a correctement saisi le mot de passe dans les deux champs. (Champ Mot de passe, champ Confirmer le mot de passe)
• Assurez-vous également que toutes les listes déroulantes et cases à cocher sont cochées correctement.

Types de validation de formulaire

• Validation du formulaire côté client
• Validation de formulaire côté serveur

1. Validation du formulaire côté client

Pour éviter les contraintes et la bande passante inutile à la validation côté serveur du serveur, il est utile d'utiliser Jscript. Après avoir validé côté client, vous devriez avoir une autre validation côté serveur. La raison de faire une autre validation côté serveur est que l'utilisateur a peut-être désactivé JavaScript sur son navigateur Web.

La validation côté client prend moins de temps à valider puisque la validation a lieu sur le navigateur de l'utilisateur et permet à l'utilisateur d'avoir une meilleure expérience. Alors que dans la validation côté serveur qui se produit sur le serveur, elle nécessite l'entrée de l'utilisateur. Ensuite, il doit être envoyé au serveur avant la validation et enfin, l'utilisateur doit attendre la réponse du serveur pour savoir sur quel champ l'erreur s'est produite.

Exemple



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Sortie :

2. Validation du formulaire côté serveur

La validation côté serveur a été effectuée pour garantir que toutes les données ont été saisies par l'utilisateur et que rien n'a été laissé en noir ou saisi de manière incorrecte. La validation côté serveur s'assure qu'il n'y a pas d'erreur dans le formulaire saisi par l'utilisateur.

Exemple



Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
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(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
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(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
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(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music





Production:

Conclusion - Validation du formulaire JavaScript

La validation de formulaire en JavaScript ne nécessite pas de codage complexe, mais nous devons réfléchir du point de vue de l'utilisateur sur la façon dont il commettrait des erreurs lors du remplissage d'un formulaire et comment il peut être validé à l'aide des différentes méthodes. Nous devons nous assurer que si l'utilisateur ne saisit pas correctement les informations, le message d'erreur sur quel champ l'erreur s'est produite et fournir des instructions sur le format de saisie.

Articles recommandés

Cela a été un guide pour la validation des formulaires JavaScript. Ici, nous discutons également des choses qui doivent être vérifiées lors de la validation de formulaire et de ses types. Vous pouvez également consulter les articles suivants pour en savoir plus -

1. Encapsulation en JavaScript
2. Fonctionnalités de JavaScript
3. Expressions régulières en JavaScript
4. Contrôles de validation ASP.Net
5. Exemples de cases à cocher dans Bootstrap
6. Deux façons de valider un formulaire HTML avec des exemples