jQuery – Page d’inscription

La librairie jQuery est un langage qui s’exécute côté client dès que la page HTML est chargée.
Ce langage permet de dynamiser vos pages en faisant des animations.

À travers ce tutoriel, vous apprendrez à utiliser jQuery afin de tester que les champs obligatoires sont bien remplis sans avoir besoin d’envoyer le formulaire au serveur.
Cela permet de limiter le nombre de requêtes envoyées au serveur alors que des informations sont manquantes et que le formulaire devrait être re-soumis à l’utilisateur pour qu’il le complète.

Avant de commencer, placez cette ligne dans votre balise <head> :

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

 

 

jQuery(document).ready(function(){

	jQuery("#register").submit(function(){
	
		if (jQuery("#nom").val() == "") {
			alert("Merci de saisir votre nom");
			jQuery("#nom").focus();
			return false;
		}
		if (jQuery("#prenom").val() == "") {
			alert("Merci de saisir votre prenom");
			jQuery("#prenom").focus();
			return false;
		}
		if (jQuery("#email").val() == "" || valideEmail(jQuery("#email").val()) ) {
			alert("Merci de saisir votre adresse email correcte");
			jQuery("#email").focus();
			return false;
		}
		if (jQuery("#password").val() == "") {
			alert("Merci de saisir votre mot de passe");
			jQuery("#password").focus();
			return false;
		}
		if (jQuery("#vpassword").val() == "") {
			alert("Merci de saisir la vérification de votre mot de passe");
			jQuery("#vpassword").focus();
			return false;
		}
	
	});
	
	
	function valideEmail(Email){
		var filtre = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
		var valid = filtre.test(Email);
		
		if (!valid) {
			return true;
		}
		return false;
	}
	
});

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
		<meta name="Content-Language" content="fr" />
		<meta name="Description" content="" />
		<meta name="Subject" content="" />
		<meta name="Content-Type" content="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="style.css" />
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="form.js"></script>
		<title>Neo-web.fr</title>
	</head>

	<body class="my_background">

		<div class="container">
			<form role="form" id="register" method="post" action="SUCCESS">
				<div class="row">
					<div class="col-md-offset-2 col-md-8">
						<h1> Inscription <br/> <small> Merci de renseigner vos informations </small></h1>
					</div>
				</div>

				<div class="row">
					<div class="col-md-offset-2 col-md-3">
					<div class="form-group">
						<label for="Nom">Nom</label>
						<input type="text" class="form-control" id="nom" placeholder="Nom">
					</div>
					</div>
					<div class="col-md-offset-1 col-md-3">
						<div class="form-group">
							<label for="Prenom">Prénom</label>
							<input type="text" class="form-control" id="prenom" placeholder="Prénom">
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-offset-2 col-md-7">
						<div class="form-group">
							<label for="Email">Email address</label>
							<input type="text" class="form-control" id="email" placeholder="Enter email">
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-offset-2 col-md-3">
						<div class="form-group">
							<label for="Password">Mot de passe</label>
							<input type="password" class="form-control" id="password" placeholder="Mot de passe">
						</div>
					</div>
					<div class="col-md-offset-1 col-md-3">
						<div class="form-group">
							<label for="Vpassword">Vérification mot de passe</label>
							<input type="password" class="form-control" id="vpassword" placeholder="Vérification mot de passe">
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-offset-2  col-md-3">
						<div class="input-group">
							<span class="input-group-addon glyphicon glyphicon-phone"> </span>
							<input type="text" class="form-control" id="tel" placeholder="Numéro de téléphone">
						</div>
					</div>
					<div class="col-md-offset-1  col-md-3">
						<div class="input-group">
							<span class="input-group-addon glyphicon glyphicon-globe"> </span>
							<input type="text" class="form-control" id="adresse" placeholder="Adresse">
						</div>
					</div>
					<br/>
					<div class="row">
						<div class="col-md-offset-5  col-md-1">
							<button type="submit" class="btn btn-primary">S'incrire</button>
						</div>
					</div>
				</div>

			</div>
		</form>
	</body>
</html>

BootstrapResponsiv Design

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>