Correction exercices AJAX : Série 02
Correction exercices AJAX : Série 02
-
Objectifs
- Apprendre à créer un système d’inscription
-
Application 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code HTML
-
Fichier css
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Un formulaire de connexion en AJAX</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/fonctionsAjax.js"></script>
</head>
<body>
<div class="container box">
<div class="row">
<div class="form-group">
<form class="form-inscription" id="form_inscription" onsubmit="return false;">
<h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> S'inscrire avec</h1>
<div class="social-login">
<button class="btn facebook-btn social-btn" type="button">
<span><i class="fab fa-facebook-f"></i>Inscrivez-vous avec Facebook</span>
</button>
</div>
<!--<div class="social-login">
<button class="btn google-btn social-btn" type="button"><span><i class="fab fa-google-plus-g"></i>Inscrivez-vous avec Google+</span> </button>
</div>-->
<p style="text-align:center">OU</p>
<div class="form-group position-relative mb-1">
<input type="text" id="nomPrenom" name="nomPrenom" class="form-control is-invalid" placeholder="Saisir votre nom" required="" autofocus="">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
<small id="output_nomPrenom" class="mt-1"></small>
<!--pseudo***********************-->
<div class="form-group position-relative mb-1">
<input type="text" id="pseudo" name="pseudo" class="form-control is-invalid"
placeholder="Saisir votre pseudo" required="" autofocus="">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
<small id="output_pseudo" class="mt-1"></small>
<!--mail***********************-->
<div class="form-group position-relative mb-1">
<input type="email" id="email" name="email" class="form-control is-invalid"
placeholder="Addresse Email" required="" autofocus="" value="">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
<small id="output_email"></small>
<!--password***********************-->
<div class="form-group position-relative mb-1">
<input type="password" id="user-passwd" name="pwdUtilisateur"class="form-control is-invalid"
placeholder="Mot de passe" required="">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
<small id="output_pass1"></small>
<!--verifpassword***********************-->
<div class="form-group position-relative mb-1">
<input type="password" id="user-repeatpass" name="repwdUtilisateur" class="form-control is-invalid"
placeholder="Répéter le mot de passe" required="" autofocus="" value="">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
<small id="output_pass2"></small>
<div id="status">
</div>
<br>
<!--<input type="submit" value=" S'inscrire" class="btn btn-primary btn-block fas fa-user-plus">-->
<input type="submit" id="bRegister" class="btn btn-primary btn-block fas fa-user-plus" value=" S'inscrire" />
<!--<button class="btn btn-primary btn-block" name="inscription"
type="submit"><i class="fas fa-user-plus"></i><i id="bRegister">S'inscrire</i></button>-->
</form>
<br>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
/* sign in FORM */
.box{
width:412px;
margin:10vh auto;
background-color:#f3f3f3;
box-shadow: 1px 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border:1px solid #3C589C;
border-radius: 5px;
border-bottom: 0px;
}
form {
width: 100%;
max-width: 410px;
padding: 15px;
margin: auto;
}
.social-login{
width:390px;
margin:0 auto;
margin-bottom: 10px;
}
.social-btn{
font-size: 1.3rem;
font-weight: 100;
color:white;
width:390px;
font-size: 0.9rem;
}
.facebook-btn{ background-color:#3C589C; }
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
