Popup inscription
Posté : 01 juin 2015, 20:18
Bonjour,
J'ai créé un popup d'inscription pour mon site, mais je souhaiterais que lorsque je clique sur "valider" mon popup ne se ferme pas et qu'il affiche en bas le message de succès ou d'erreur.
Là il l'affiche, mais comme il ferme le popup il faut recliquer dessus pour voir le message donc ce n'est pas très ergonomique ni intuitif.
Vous pouvez faire le test à l'adresse suivante http://johannausinabia.com/artisans/
Et voici mon code du popup inscription
Merci de vos suggestions pour arranger ce problème.
J'ai créé un popup d'inscription pour mon site, mais je souhaiterais que lorsque je clique sur "valider" mon popup ne se ferme pas et qu'il affiche en bas le message de succès ou d'erreur.
Là il l'affiche, mais comme il ferme le popup il faut recliquer dessus pour voir le message donc ce n'est pas très ergonomique ni intuitif.
Vous pouvez faire le test à l'adresse suivante http://johannausinabia.com/artisans/
Et voici mon code du popup inscription
Code : Tout sélectionner
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">S'inscrire</h4>
</div> <!-- FIN modal-header -->
<div class="modal-body">
<form method="post" action="" accept-charset="UTF-8" class="form-horizontal">
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="prenom">Prénom</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-user"></i>
</div>
<input type="text" id="prenom" placeholder="Entrez votre prénom" class="form-control" name="prenom">
</div>
</div>
<div class="control-group">
<label class="control-label" for="nom">Nom</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-user"></i>
</div>
<input type="text" id="nom" placeholder="Entrez votre nom" class="form-control" name="nom">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-envelope-o"></i>
</div>
<input type="email" id="email" placeholder="Entrez votre Email" class="form-control" name="email" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="metier">Métier</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-briefcase"></i>
</div>
<input type="text" id="metier" placeholder="Entrez votre métier" class="form-control" name="metier">
</div>
</div>
</div> <!-- FIN col-sm-6 -->
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="pseudo">Pseudo</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-user"></i>
</div>
<input type="text" id="pseudo" placeholder="Entrez votre Pseudo" class="form-control" name="pseudo" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="mdp">Mot de passe</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-key"></i>
</div>
<input type="password" id="mdp" placeholder="Entrez votre mot de passe" class="form-control" name="mdp" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="cp">Code postal</label>
<div class="input-group champs-connexion">
<div class="input-group-addon icon-connexion">
<i class="fa fa-map-marker"></i>
</div>
<input type="number" id="cp" placeholder="Code postale" class="form-control" name="cp">
</div>
</div>
<div class="control-group">
<p>
En vous inscrivant vous acceptez les <a href="#">conditions d'utilisation</a>
</p>
</div>
</div> <!-- FIN col-sm-6 -->
<button type="submit" name="valider" class="btn btn-success pull-right bleu-btn">
Connexion <i class="fa fa-chevron-right"></i>
</button>
</form>
</div> <!-- FIN modal-body -->
<div class="modal-footer modal-footer-connexion">
<?php
// traiter ce qui a été envoyé par le formulaire
if($_POST)
{
//affichageTableau($_POST);
$verifPseudo = preg_match('#^[a-zA-Z0-9.-_]+$#', $_POST['pseudo']);
if(!$verifPseudo) // 1) erreur : pb de caractères...
{
echo '<div class="erreur">Votre pseudo n\'est pas valide. Veuillez saisir des caractères autorisés.</div>';
$erreur = true;
}
if(strlen($_POST['pseudo']) < 5 || strlen($_POST['pseudo']) > 15) // 2) erreur : pb de taille...
{
echo '<div class="erreur">Votre pseudo doit comporter entre 5 et 15 caractères.</div>';
$erreur = true;
}
$resultat = $pdo->query("SELECT * FROM membrea WHERE pseudo = '$_POST[pseudo]' OR email = '$_POST[email]'");
if($resultat->rowCount() == 1) // 3) erreur : pseudo indisponible...
{
echo '<div class="erreur">Ce pseudo ou email est déjà utilisé.</div>';
$erreur = true;
}
if(!isset($erreur)) // si $erreur n'existe pas.
{
$_POST['mdp'] = md5($_POST['mdp']); // cryptage
// on insère
$pdo->query("INSERT INTO membrea (prenom, nom, email, metier, pseudo, mdp, cp, dateEnregistrement) VALUES ('$_POST[prenom]','$_POST[nom]','$_POST[email]','$_POST[metier]','$_POST[pseudo]','$_POST[mdp]','$_POST[cp]', NOW())");
echo '<div class="erreur-no">enregistrement ok.</div>';
}
}
?>
</div> <!-- FIN modal-footer -->
</div> <!-- FIN modal-content -->