Bon j'ai travaillé un peu le jquery.
Voilà le résultat (toujours à tester dans une page séparée).
A noter qu'une requête est faite au fichier "verif_nom.php" pour vérifier si le nom est déjà utilisé ou non.
Voici le contenu de "verif_nom.php" qu'il est nécessaire de placer sur ton serveur pour faire le test.
J'ai simulé une requête qui dure 3 secondes (pour tester des conditions défavorables) et tu constate que seul le nom "azerty" est déjà pris en partant du principe que la requête retourne 0 si le nom testé est disponible :
<?php
header('Content-type: text/html; charset=UTF-8');
sleep(3);
$name = isset($_POST['name']) && $_POST['name'] == 'azerty' ? 1 : 0;
echo $name;
?>
Et maintenant la page du formulaire avec des tests javascript en utilisant jquery et une requête ajax sur le fichier ci-dessus pour vérifier que le nom est disponible "onblur" sur le champ name et "onsubmit" sur le formulaire :
<?php
if (isset($_POST['ok']))
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function()
{
var name = $("#name");
var span_name = $(".name");
var mail = $("#mail");
var span_mail = $(".mail");
var tel = $("#tel");
var span_tel = $(".tel");
function Formate_false (input, span, retour)
{
input.css({background: "#EFB8CB" });
span.empty().append(retour);
}
function Formate_true (input, span, retour)
{
input.css({background: "#71ED63" });
span.empty().append(retour);
}
function Check_name (ajax_synchro)
{
var retour = "Le nom doit comporter au minimum cinq caractères";
if ($.trim(name.val()).length < 5)
{
Formate_false (name, span_name, retour);
return false;
}
else
{
var test_nom = false;
$.ajax({
type: "POST",
url: 'verif_nom.php',
data: "name="+name.val()+"",
async: ajax_synchro, // si Check_name est appelée onsubmit "async = false" pour bloquer le navigateur en attente de la réponse.
success: function(result)
{
if (result == 0) // Si la requête retourne 0 (le nom est disponible)
{
Formate_true (name, span_name, 'nom');
test_nom = true;
}
else
{
retour = "Le nom est déjà utilisé";
Formate_false (name, span_name, retour);
test_nom = false;
}
}
});
return test_nom;
}
}
function Controle_mail(value)
{
var retour = "Email invalide";
var regex_mail = /^([a-zA-Z0-9_-])+([.]?[a-zA-Z0-9_-]{1,})*@([a-zA-Z0-9-_]{2,}[.])+[a-zA-Z]{2,3}$/;
if (!(regex_mail.test(mail.val())))
{
Formate_false (mail, span_mail, retour);
return false;
}
else
{
Formate_true (mail, span_mail, 'mail');
return true;
}
}
function Controle_tel(value)
{
var retour = "Téléphone invalide";
var regex_tel = /^0[1-9]([_.\-\s]*[0-9]{2}){4}$/;
if (!(regex_tel.test(tel.val())))
{
Formate_false (tel, span_tel, retour);
return false;
}
else
{
Formate_true (tel, span_tel, 'tel');
return true;
}
}
name.blur(function()
{
if ($.trim(name.val()) != '') Check_name (true);
});
mail.blur(function()
{
if ($.trim(mail.val()) != '') Controle_mail ();
});
tel.blur(function()
{
if ($.trim(tel.val()) != '') Controle_tel ();
});
$("#mon_form").submit(function()
{
if (Check_name (false) & Controle_mail () & Controle_tel ())
return true;
else
return false;
});
});
-->
</script>
<style type="text/css">
.info {
background: #EFEFEF;
}
</style>
</head>
<body>
<div>
<form action="#" method="post" id="mon_form" >
<input type="text" name="mail" id="mail" class="input" value="" />
<span class="mail info" >mail</span>
<br />
<input type="text" name="name" id="name" class="input" value="" />
<span class="name info">nom</span>
<br />
<input type="text" name="tel" id="tel" class="input" value="" />
<span class="tel info" >tel</span>
<br />
<input type="submit" name = "ok" value="ok" />
</form>
<div>
</body>
</html>
A noter que la vérification "onblur" sur le nom utilise une requête ajax
asynchrone pour ne pas bloquer le navigateur dans l'attente de la réponse, alors que la vérification "onsubmit" utilise une requête ajax synchrone pour attendre la réponse avant l'envoi du formulaire. C'est pour mieux visualiser cette différence que j'ai fait un sleep de 3 secondes dans mon fichier verif_nom.php.
Pour la vérification des mail et téléphone j'ai pris des regex sur le web sans vérifier plus que ça... (mais ils l'on l'air de bien fonctionner). Quitte à utiliser jquery je suppose qu'il doit y avoir des fonctions intégrées correspondantes qu'il serait peut-être mieux d'utiliser.
Alors ça te fait avancer ?
