Skip to content

Instantly share code, notes, and snippets.

@DWS-paris

DWS-paris/multiStepForm.html

Created September 20, 2017 08:53
Show Gist options
  • Save DWS-paris/c6f340d36c78bac41ded966e4a26895d to your computer and use it in GitHub Desktop.
Save DWS-paris/c6f340d36c78bac41ded966e4a26895d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multiStepForm.html
<!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>
@DWS-paris
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment