alone06
Messages postés115Date d'inscriptionmardi 9 novembre 2010StatutMembreDernière intervention18 mai 2016
-
Modifié par alone06 le 14/10/2015 à 21:39
alone06
Messages postés115Date d'inscriptionmardi 9 novembre 2010StatutMembreDernière intervention18 mai 2016
-
15 oct. 2015 à 14:30
Bonjour,
Je viens vous voir après avoir été bloqué sur un petit script de validation d'un formulaire en ajax.
Sans trop tarder, je vous montre les fichiers :
index.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body class="home" dir="ltr">
<!-- Outer Starts -->
<div class="outer" style="background:#ebeff2;">
<!-- Header two Starts -->
<? include "head.php"; ?>
<!-- Header two Ends -->
<div class="main-block">
<div class="page-heading-two">
<div class="container">
<h2> Ajout d'un nouveau compte : </h2>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5" style="width:auto">
<div class="well login-reg-form">
<h4>Étape 1 : Informations personnelles</h4>
<hr style="border-bottom: 1px solid rgb(212, 221, 221);"/>
<form class="form-horizontal" method="post" role="form" style="max-width: 615px" id="register_form" onsubmit="return false;">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Nom <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="text" placeholder="Nom " value="" name="company_name" id="name" required="required">
<small id="output_checkname"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="representant"> Nom et prénom du représentant légal <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="text" placeholder="Nom et prénom du représentant légal" value="" name="representant" id="representant" required="required">
<small id="output_checkrepresentant"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email"> email <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="text" placeholder="email" value="" name="email" id="email" required="required">
<small id="output_checkemail"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="username"> Nom d'utilisateur <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="text" placeholder="Nom d'utilisateur" value="" name="username" id="username" required="required">
<small id="output_checkusername"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="phone">téléphone</label>
<div class="col-sm-9">
<input class="form-control" type="text" placeholder="téléphone" value="" name="phone" id="phone">
<small id="output_checkphone"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="password"> mot de passe <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="password" placeholder="mot de passe" name="password" id="password" required="required">
<small id="output_checkpassword"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="repassword"> Confirmez Le Mot De Passe <span class="text-danger">*</span> </label>
<div class="col-sm-9">
<input class="form-control" type="password" placeholder="Confirmez Le Mot De Passe" name="repassword" id="repassword" required="required">
<small id="output_checkrepassword"></small>
</div>
</div>
<hr style="border-bottom: 1px solid rgb(212, 221, 221);"/>
<div class="form-group" id="status" style="display: none;">
<div class="notification note-error">
<p style="margin-left: 44px;margin-top: -4px;">
<strong>Erreur:</strong>
Merci de remplir tous les champs.
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-red" type="submit" name="envoi" id="bRegister">Soumettre</button>
</div>
</div>
</form>
<hr style="border-bottom: 1px solid rgb(212, 221, 221);"/>
</div>
</div>
</div>
</div>
<? include "foot.php"; ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#register_form input").focus(function(){
$("#status").fadeOut(800);
});
$("#name").blur(function(){
//On vérifie si le nom de la compagnie est ok
check_name();
});
$("#representant").blur(function(){
//On vérifie si le nom du representant est ok
check_representant();
});
$("#email").blur(function(){
//On vérifie si l email est ok ou n'est déjà utilisé
check_email();
});
$("#username").blur(function(){
//On vérifie si le username est ok ou n'a pas été déjà pris
check_username();
});
$("#phone").blur(function(){
//On vérifie si le numéro de téléphone est ok
check_phone();
});
$("#password").blur(function(){
//On vérifie si le mot de passe est ok
if($(this).val().length < 6){
$("#output_password").css("color", "red").html("<br/>Trop court (6 caractères minimum)");
} else if($("#repassword").val() != "" && $("#repassword").val() != $("#password").val()){
$("#output_password").html("<br/>Les deux mots de passe sont différents");
$("#output_repassword").html("<br/>Les deux mots de passe sont différents");
} else {
$("#output_password").html('<img src="images/check.png" class="small_image" alt="" />');
}
});
$("#repassword").blur(function(){
//On vérifie si les mots de passe coïncident
check_password();
});
function check_name(){
$.ajax({
type: "post",
url: "register.php",
data: {
'name_check' : $("#name").val()
},
success: function(data){
if(data == "success") {
$("#output_checkname").html('<img src="images/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkname").css("color", "red").html(data);
}
}
});
}
function check_representant(){
$.ajax({
type: "post",
url: "register.php",
data: {
'representant_check' : $("#representant").val()
},
success: function(data){
if(data == "success"){
$("#output_checkrepresentant").html('<img src="images/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkrepresentant").css("color", "red").html(data);
}
}
});
}
function check_email(){
$.ajax({
type: "post",
url: "register.php",
data: {
'email_check' : $("#email").val()
},
success: function(data){
if(data == "success"){
$("#output_checkemail").html('<img src="images/check.png" class="small_image" alt="" />');
} else {
$("#output_checkemail").css("color", "red").html(data);
}
}
});
}
function check_username(){
$.ajax({
type: "post",
url: "register.php",
data: {
'username_check' : $("#username").val()
},
success: function(data){
if(data == "success"){
$("#output_checkusername").html('<img src="images/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkusername").css("color", "red").html(data);
}
}
});
}
function check_phone(){
$.ajax({
type: "post",
url: "register.php",
data: {
'phone_check' : $("#phone").val()
},
success: function(data){
if(data == "success"){
$("#output_checkphone").html('<img src="images/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkphone").css("color", "red").html(data);
}
}
});
}
function check_password(){
$.ajax({
type: "post",
url: "register.php",
data: {
'password_check' : $("#password").val(),
'repassword_check' : $("#repassword").val()
},
success: function(data){
if(data == "success"){
$("#output_repassword").html('<img src="images/check.png" class="small_image" alt="" />');
$("#output_password").html('<img src="images/check.png" class="small_image" alt="" />');
} else {
$("#output_repassword").css("color", "red").html(data);
}
}
});
}
//Traitement du formulaire d'inscription
$("#register_form").submit(function(){
var status = $("#status");
var company_name = $("#name").val();
var representant = $("#representant").val();
var email = $("#email").val();
var username = $("#username").val();
var phone = $("#phone").val();
var password = $("#password").val();
var repassword = $("#repassword").val();
if(name == "" || representant == "" || email == "" || username == "" || password == "" || repassword == ""){
status.html("Veuillez remplir tous les champs").fadeIn(400);
} else if(password != repassword) {
status.html("Les deux mots de passe sont différents").fadeIn(400);
} else {
$.ajax({
type: "post",
url: "register.php",
data: {
'name' : company_name,
'representant' : representant,
'email' : email,
'username' : username,
'phone' : phone,
'password' : password,
'repassword' : repassword,
},
beforeSend: function(){
$("#bRegister").attr("value", "Traitement en cours...");
},
success: function(data){
if(data != "register_success"){
status.html(data).fadeIn(400);
$("#bRegister").attr("value", "Soumettre");
$("#bRegister").addClass("btn-primary").css("color", "white");
} else {
/*traitement*/
}
}
});
}
});
});
</script>
<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>-->
<span class="totop"><a href="#"><i class="fa fa-angle-up bg-color"></i></a></span>
<!-- Javascript files -->
<!-- Bootstrap JS -->
</div>
<div class="modal-footer"> </div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>
et le fichier register.php :
<?php
include "functions.php";
//Vérification du nom
if(!empty($_POST['name_check'])){
$name=htmlspecialchars(ltrim(rtrim($_POST['name_check'])), ENT_QUOTES);
if(strlen($name) < 3 ){
echo '<br/>3 caractères minimum SVP.';
exit();
}
//Connexion à la base de données
require "dataconn.php";
$sql1 = "SELECT id FROM reg WHERE name='$name'";
$req1 = mysql_query($sql1);
$res1 = mysql_num_rows($req1);
if($res1!=0)
{
echo '<br/>Ce nom existe déjà dans notre base de données !';
exit();
} else {
echo 'success';
exit();
}
}
//Vérification du representant
if(!empty($_POST['representant_check'])){
$representant=htmlspecialchars(ltrim(rtrim($_POST['representant_check'])), ENT_QUOTES);
if(!ctype_alpha($_POST['representant_check'])){
echo '<br/>Le nom du representant ne peut pas contenir des chiffres.';
exit();
}else {
echo 'success';
exit();
}
}
//Vérification de l'email
if(!empty($_POST['email_check'])){
$email = $_POST['email_check'];
//Vérifier l'adresse mail
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo '<br/>Adresse email invalide !';
exit();
}
//Connexion à la base de données
require "dataconn.php";
$sql2 = "SELECT id FROM reg WHERE email='$email'";
$req2 = mysql_query($sql2);
$res2 = mysql_num_rows($req2);
if($res2!=0)
{
echo '<br/>Adresse email déjà utilisée !';
exit();
} else {
echo 'success';
exit();
}
}
//Vérification du pseudo
if(!empty($_POST['username_check'])){
$username = $_POST['username_check'];
$username = preg_replace('#[^a-z0-9]#i', '', $username); // filter everything but letters and numbers
if(strlen($username) < 3 || strlen($username) > 16){
echo '<br/>3 à 16 caractères SVP.';
exit();
}
if(is_numeric($username[0])){
echo '<br/>Le pseudo doit commencer par une lettre.';
exit();
}
//Connexion à la base de données
require "dataconn.php";
$sql3 = "SELECT id FROM reg WHERE username='$username'";
$req3 = mysql_query($sql3);
$res3 = mysql_num_rows($req3);
if($res3!=0)
{
echo '<br/>Pseudo déjà utilisé !';
exit();
} else {
echo 'success';
exit();
}
}
//Vérification du numéro de téléphone
if(!empty($_POST['phone_check'])){
$phone = $_POST['phone_check'];
$phone = preg_replace('#[^0-9]#i', '', $phone); // filter everything but letters and numbers
if(!clean_display_phone($phone)){
echo '<br/>Veuillez vérifier le numéro de téléphone.';
exit();
}
if($phone[0]!='0'){
echo '<br/>Veuillez vérifier le numéro de téléphone.';
exit();
}
}
//Vérification des mots de passe
if(!empty($_POST['password_check']) && !empty($_POST['repassword_check'])){
if(strlen($_POST['password_check']) < 6 || strlen($_POST['password_check']) < 6){
echo '<br/>Trop court (6 caractères minimum)';
exit();
} else if($_POST['password_check'] == $_POST['repassword_check']){
echo 'success';
exit();
} else {
echo '<br/>Les deux mots de passe sont différents';
exit();
}
}
//Traitement de l'inscription
?>
Le soucis est le suivant :
quand data != de bon ce qui veut dire que l'email est invalide ou existe déjà le message d'erreur apparait bien
mais quand le résultat est bon c'est la ou est le soucis : bon apparait en rouge au lieu de la petite icone de validation.
alone06
Messages postés115Date d'inscriptionmardi 9 novembre 2010StatutMembreDernière intervention18 mai 2016 15 oct. 2015 à 13:30
j'ai eu une petite idée concernant le soucis, c'est que le test ce fait sur success qui apparait sur tous les résultats mais meme en donnant à chaque resultat un success différent (success1, success2 ...) l'erreur persiste
alone06
Messages postés115Date d'inscriptionmardi 9 novembre 2010StatutMembreDernière intervention18 mai 2016 15 oct. 2015 à 14:30
bon je viens de trouver l'erreur, c'etait un fichier fonctions que j'appellais, je ne sais pas comment il interagissait avec mon script.
Je l'ai enlevé et tous marche bien maintenant à part le du mot de passe et sa verification mais ça ne doit pas etre trop pénible à regler.
j'espère que ce script de verification de formulaire aidera ceux qui en auront besoin.
