Created
September 20, 2017 08:53
-
-
Save DWS-paris/c6f340d36c78bac41ded966e4a26895d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Multistep Form</title> | |
</head> | |
<body> | |
<!-- multistep form --> | |
<form id="msform" method="post" action="signup" class="signup-form"> | |
<fieldset> | |
<h2>Inscription par mail 1/2</h2> | |
<input name="email" class="email" type="email" placeholder="Adresse mail"> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<input name="password" class="password" type="password" placeholder="Mot de passe"> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<input name="confirm_password" class="confirm_password" type="password" placeholder="Confirmez le mot de passe"> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<!-- | |
Remplacement du bouton par une balise a, l'attribut name semble inutile, | |
à vérifier si il n'est pas utilisé quelque par, sinon le supprimer | |
de la balise a | |
<button type="button" name="next" class="next" value="next">Suivant</button> | |
--> | |
<a href="#" name="next" class="next" value="next" id="msFormNextBtn">Suivant</a> | |
</fieldset> | |
<fieldset> | |
<h2>Inscription par mail 2/2</h2> | |
<br> | |
<div class="formField"> | |
<p>Genre</p> | |
<!-- | |
Pour simplifier l'utilisation des type=radio je créé un input masqué en plus | |
qui stockera la valeur du genre | |
--> | |
<input class="gender" name="genderRadio" type="radio" value="female">Femme</input> | |
<input class="gender" name="genderRadio" type="radio" value="male">Homme</input> | |
<input type="hidden" id="userGenderValue" name="gender"> | |
<!-- Je déplace la span dans la div --> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
</div> | |
<input name="firstname" class="firstname" type="text" placeholder="Prénom" /> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<input name="lastname" class="lastname" type="text" placeholder="Nom de famille" /> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<input name="nickname" class="nickname" type="text" placeholder="Surnom" /> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<p>Date de naissance</p> | |
<input name="birthdate" class="birthdate" type="date" /> | |
<span class="error_signup" style="display:none; color:red; font-weight: bold"></span> | |
<!--Fenetre modal pour CGU - Modal for CGU (Aurelie le 01/09) --> | |
<p class="infos-sub">En cliquant sur Inscription, je certifie que j'ai lu les Conditions générales d'utilisation et je les accepte.</p> | |
<!-- | |
Remplacement du bouton par une balise a, l'attribut name semble inutile, | |
à vérifier si il n'est pas utilisé quelque par, sinon le supprimer | |
de la balise a | |
<button type="button" name="previous" class="previous dismiss-button" value="previous">Précédent</button> | |
--> | |
<a href="#" name="previous" class="previous dismiss-button" value="previous" id="msFormPrevBtn">Précédent</a> | |
<button type="submit" name="sign-up" class="action-button" value="sign-up">Inscription</button> | |
</fieldset> | |
</form> | |
<!-- Intégration de jQuery --> | |
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> | |
<!-- Script pour le formulaire --> | |
<script> | |
$(document).ready(function(){ | |
/* | |
Masquer le deuxièmre fieldset | |
*/ | |
$('#msform fieldset:last-of-type').hide(); | |
/* | |
Validation de la première étape | |
- Capter le clique sur la balise #msFormNextBtn | |
- Vérifier la valeur de name="email" | |
- Vérifier la valeur de name="password" | |
- Vérifier que la valeur de name="password" est égale à celle de name="confirm_password | |
- Animer le DOM | |
*/ | |
/* Création d'un objet pour stocker les informations de l'utilisateur */ | |
var MSFuserData = { | |
userFirstname: undefined, | |
userLastname: undefined, | |
userNickname: undefined, | |
userEmail: undefined, | |
userPass: undefined, | |
userGender: undefined, | |
userBirthDate: undefined | |
} | |
$('#msFormNextBtn').click(function(evt){ | |
/* Bloquer le comportement naturel de la balise */ | |
evt.preventDefault(); | |
/* Création des variables */ | |
var MSFuserEmail = $('#msform [name="email"]').val(); | |
var MSFuserEmailError = $('#msform [name="email"]').next(); | |
var MSFuserPass = $('#msform [name="password"]').val(); | |
var MSFuserPassError = $('#msform [name="password"]').next(); | |
var MSFuserPassConfirm = $('#msform [name="confirm_password"]').val(); | |
var MSFuserPassConfirmError = $('#msform [name="confirm_password"]').next(); | |
/* Vérification de name="email */ | |
if( MSFuserEmail.length == 0 ){ | |
/* Afficher le message d'erreur */ | |
MSFuserEmailError.text('Email obligatoire').show(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userEmail = MSFuserEmail; | |
/* Masquer l'erreur */ | |
MSFuserEmailError.hide(); | |
} | |
/* Vérification de name="password */ | |
if( MSFuserPass.length == 0 ){ | |
/* Afficher le message d'erreur */ | |
MSFuserPassError.text('Mot de passe obligatoire').show(); | |
} else if(MSFuserPass != MSFuserPassConfirm){ | |
/* Afficher le message d'erreur */ | |
MSFuserPassConfirmError.text('Les Mots de passe ne correspondent pas').show(); | |
/* Masquer l'erreurs */ | |
MSFuserPassError.hide(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userPass = MSFuserPass; | |
/* Masquer l'erreurs */ | |
MSFuserPassConfirmError.hide(); | |
} | |
/* Vérification des valeurs stockées dans MSFuserData pour passer à l'étape 2 */ | |
if(MSFuserData.userEmail != '' && MSFuserData.userPass != ''){ | |
$('#msform fieldset:first-of-type').slideUp(); | |
$('#msform fieldset:last-of-type').slideDown(); | |
} | |
}); | |
/**/ | |
/* | |
Rétour à l'étape 1 | |
- Capter le clique sur la balise #msFormPrevBtn | |
- Animer le DOM | |
*/ | |
/* Capter le clique sur la balise #msFormPrevBtn */ | |
$('#msFormPrevBtn').click(function(evt){ | |
/* Bloquer le comportement naturel de la balise */ | |
evt.preventDefault(); | |
/* Animer le DOM */ | |
$('#msform fieldset:first-of-type').slideDown(); | |
$('#msform fieldset:last-of-type').slideUp(); | |
}) | |
/**/ | |
/* | |
Validation de la deuxième étape | |
- Définir le genre | |
- Capter le submit du formulaire | |
- Vérifier le genre | |
- Vérifier le prénom | |
- Vérifier le nom | |
- Vérifier le genre | |
- Vérifier la date de naissance | |
- Vérifier que MSFuserData est correctement renseigner | |
- Envoyer les données dans la BDD | |
*/ | |
/* Définir le genre */ | |
$('#msform [name="genderRadio"]').click(function(){ | |
/* Ajouter la valeur dans le input masqué */ | |
$('#msform [name="gender"]').val($(this).val()); | |
}) | |
/* Capter le submit du formulaire */ | |
$('#msform').submit(function(evt){ | |
/* Bloquer le comportement naturel de la balise */ | |
evt.preventDefault(); | |
/* Création des variables */ | |
var MSFuserGender = $('#msform #userGenderValue').val(); | |
var MSFuserGenderError = $('#msform #userGenderValue').next(); | |
var MSFuserFirstname = $('#msform [name="firstname"]').val(); | |
var MSFuserFirstnameError = $('#msform [name="firstname"]').next(); | |
var MSFuserLastname = $('#msform [name="lastname"]').val(); | |
var MSFuserLastnameError = $('#msform [name="lastname"]').next(); | |
var MSFuserNickname = $('#msform [name="nickname"]').val(); | |
var MSFuserNicknameError = $('#msform [name="nickname"]').next(); | |
var MSFuserBirthDate = $('#msform [name="birthdate"]').val(); | |
var MSFuserBirthDateError = $('#msform [name="birthdate"]').next(); | |
/* Vérifier le genre */ | |
if( MSFuserGender.length == 0 ){ | |
/* Afficher le message d'erreur */ | |
MSFuserGenderError.text('Genre obligatoire').show(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userGender = MSFuserGender; | |
} | |
/* Vérifier le prénom */ | |
if( MSFuserFirstname.length == 0 ){ | |
/* Afficher le message d'erreur */ | |
MSFuserFirstnameError.text('Prénom obligatoire').show(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userFirstname = MSFuserFirstname; | |
} | |
/* Vérifier le nom */ | |
if( MSFuserLastname.length == 0 ){ | |
/* Afficher le message d'erreur */ | |
MSFuserLastnameError.text('Prénom obligatoire').show(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userLastname = MSFuserLastname; | |
} | |
/* Vérifier le surnom */ | |
if( MSFuserNickname.length == 0 ){ | |
/* Sauvegarder la valeur dans l'objet MSFuserData : concat. firstname et lastname */ | |
MSFuserData.userNickname = MSFuserFirstname + ' ' + MSFuserLastname; | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData : input value */ | |
MSFuserData.userNickname = MSFuserNickname; | |
} | |
/* Vérifier la date de naissance */ | |
if(MSFuserBirthDate == ''){ | |
/* Afficher le message d'erreur */ | |
MSFuserBirthDateError.text('Date de naissance obligatoire').show(); | |
} else{ | |
/* Sauvegarder la valeur dans l'objet MSFuserData */ | |
MSFuserData.userBirthDate = MSFuserBirthDate; | |
} | |
/* Vérifier que MSFuserData est correctement renseigner */ | |
if( | |
MSFuserData.userBirthDate != undefined && | |
MSFuserData.userEmail != undefined && | |
MSFuserData.userFirstname != undefined && | |
MSFuserData.userGender != undefined && | |
MSFuserData.userLastname != undefined && | |
MSFuserData.userNickname != undefined && | |
MSFuserData.userPass != undefined | |
) { | |
/* | |
Débloquer le comportement du formualire | |
A cette étape, tous les paramètres de l'objet sont renseignés | |
et le input sont rempli correctement, normalement l'inscription | |
devrait suivre correctement car je n'ai pas modifier les attributs | |
name des inputs. | |
*/ | |
$('#msform').unbind('submit').submit() | |
} | |
}) | |
/**/ | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Proposition d'interactivité sur un formulaire HTML fourni. Le principe est de valider le formulaire sur deux étapes en utilisant un objet pour stocker au fur et à mesure les données utilisateur.