Validation formulaire pure-JS

Les formulaires HTML propose nativement de définir des champs requis, mais pour plus de précision lors de la validation il est indispensable d’utiliser le JS.

Formulaire

Pour commencer on crée notre formulaire.

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h1>Validation de formulaire en JS</h1>
	<section id="formulaire">
		<form>
			<div class="etap">
				<label>Titre</label>
				<input type="text" name="titre" required>
				<label>Auteur</label>
				<input type="text" name="auteur" required>
				<label>Image</label>
				<input type="url" name="image" required>
				<label>Email</label>
				<input type="email" name="email" required>
			</div>
			<div class="etap">
				<label>Message</label>
				<textarea type="textarea" name="message"></textarea>
				<input type="submit">
			</div>
		</form>
		<div id="test">Résultat des tests : <br></div>
	</section>
	<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

Code Javascript

//regex : on défini les différentes expression régulières qui valideront les champs
var text=new RegExp("^\s*[a-zA-Z,\s]{3,}\s");
var url=new RegExp("^[a-zA-Z0-9\-\.]+\.(com|org|net|mil|edu|COM|ORG|NET|MIL|EDU)$");
var email=new RegExp("^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$");
//on place ces derniéres dans un array nominatif afin de rappeller la regex en fonction du type de données attendu
var regex = {text:text, email:email, url:url};
//Fonction qui analyse les différentes balises input
function explore(){
	//sélection des nodes "input"
	var input = document.getElementsByTagName('input');
	//Boucle pour traiter chaque nodes
	Array.prototype.forEach.call(input, i=> {
		//on crée un event listener qui exécute notre fonction de validation pour chaque node
		i.addEventListener('keydown', function(e) {
			//appel de la fonction validate() qui transfére 2 paramétre le node(i) et le type de chaque node.
			validate(i.type,i);
		});
	});
}
function validate(type,elem){
	//on applique la regex
result=regex[type].test(elem.value);
//et enfin applique un style en fonction du résultat (true ou false)
if(!result){elem.style.borderColor="red";}else{elem.style.borderColor="green";}
}

//on appelle notre fonction
explore();

 

A lire  Analyser les performances d'un site internet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

© 2018 Occitaweb formation WordPress et média sociaux