Salutation
J'utilise actuellement le bootstrap de twitter pour refaire mon site.
J'ai, lors de l'inscription, un formulaire en ajax, qui me permet de vérifier les champs.
J'aimerais que lorsque on a une erreur ou un succès, au lieu de changer le style css, on puisse changer la classe de l'élément.
voici mon code
[javascript]
$(document).ready(function(){
$("#pseudo").keyup(function(){
$(".error-pseudo-message").hide();
$(".success-pseudo-message").hide();
if(!$("#pseudo").val().match(/^[a-z0-9\-_]+$/i)){
$(".error-pseudo-message").show();
$(".error-pseudo-message").text("Le pseudo à un format invalide, seul les lesttres, les chiffres et les - et _ sont accéptés.");
$("#pseudo").css("border-color","#b60c00");
}
else if(($("#pseudo").val().length < 4)||($("#pseudo").val().length > 15)){
$(".error-pseudo-message").show();
$(".error-pseudo-message").text("Le pseudo doit être compris entre 4 et 15 caractères.");
$("#pseudo").css("border-color","#b60c00");
}
else{
var pseudo = $('#pseudo').val();
var dataString = 'pseudo='+pseudo;
$.ajax({
type: 'POST',
url: 'verifLogin.php',
data: dataString,
success:function(data){
var responseData = jQuery.parseJSON(data)
if(responseData.status=='error')
{
$(".error-pseudo-message").show();
$(".error-pseudo-message").text(responseData.message);
$("#pseudo").css("border-color","#b60c00");
}
else
{
$(".success-pseudo-message").show();
$(".success-pseudo-message").text(responseData.message);
$("#pseudo").css("border-color","#009e00");
}
}
});
return false;
}
});
$("#password").keyup(function(){
$(".error-pass-message").hide();
$(".success-pass-message").hide();
if(($("#password").val().length < 6)||($("#password").val().length > 20)){
$(".error-pass-message").show();
$(".error-pass-message").text("Le mot de passe doit être compris entre 6 et 20 caractères.");
$("#password").css("border-color","#b60c00");
}
else if(!$("#password").val().match(/^(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[0-9]{1,})[a-zA-Z0-9]+$/)){
$(".error-pass-message").show();
$(".error-pass-message").text("Le mot de passe doit contenir des lettres en majuscules et en minuscules et des nombres.");
$("#password").css("border-color","#b60c00");
}
else{
$(".success-pass-message").show();
$(".success-pass-message").text("Correct");
$("#password").css("border-color","#009E00");
}
});
$("#confirm").keyup(function(){
$(".error-cpass-message").hide();
$(".success-cpass-message").hide();
if($("#confirm").val() != $("#password").val()) {
$(".error-cpass-message").show();
$(".error-cpass-message").text("Le mot de passe de confirmation doit être identique au mot de passe.");
$("#confirm").css("border-color","#b60c00");
}
else{
$(".success-cpass-message").show();
$(".success-cpass-message").text("Correct");
$("#confirm").css("border-color","#009E00");
}
});
$("#email").keyup(function(){
$(".error-email-message").hide();
$(".success-email-message").hide();
if(!$("#email").val().match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]{2,}\.[a-z]{2,4}$/)){
$(".error-email-message").show().text("Format invalide: type => [email protected]");
$("#email").css("border-color","#b60c00");
}
else{
var email = $('#email').val();
var dataString = 'email='+email;
$.ajax({
type: 'POST',
url: 'verifMail.php',
data: dataString,
success:function(data){
var responseData = jQuery.parseJSON(data)
if(responseData.status=='error')
{
$(".error-email-message").show();
$(".error-email-message").text(responseData.message);
$("#email").css("border-color","#b60c00");
}
else
{
$(".success-email-message").show();
$(".success-email-message").text(responseData.message);
$("#email").css("border-color","#009e00");
}
}
});
return false;
}
});
$("#confirmemail").keyup(function(){
$(".error-cemail-message").hide();
$(".success-cemail-message").hide();
if($("#confirmemail").val() != $("#email").val()) {
$(".error-cemail-message").show();
$(".error-cemail-message").text("L'email de confirmation doit être identique a l'email.");
$("#confirmemail").css("border-color","#b60c00");
}
else{
$(".success-cemail-message").show();
$(".success-cemail-message").text("Correct");
$("#confirmemail").css("border-color","#009E00");
}
});
$("#website").keyup(function(){
if(!$("#website").val().match(/^http:\/\/[^\.]+\.[a-z]{2,4}$/i)){
$("#website").next(".error-message").fadeIn().text("Format invalide: type => http://Monsite.com");
$("#website").css("border-color","#b60c00");
}
else{
$("#website").next(".error-message").hide().text("");
$("#website").css("border-color","#009E00");
}
});
$("#localisation").keyup(function(){
if(!$("#localisation").val().match(/^[a-z0-9-_]{2,}$/i)){
$("#localisation").next(".error-message").fadeIn().text("La ville doit être compris entre 2 et 20 caractères et ne doit pas contenir des caractères spéciaux.");
$("#localisation").css("border-color","#b60c00");
}
else if($("#localisation").val().length > 20){
$("#localisation").next(".error-message").fadeIn().text("La ville doit être compris entre 8 et 15 caractères.");
$("#localisation").css("border-color","#b60c00");
}
else{
$("#localisation").next(".error-message").hide().text("");
$("#localisation").css("border-color","#009E00");
}
});
//normalement on ne s'en sert pas
$("#envoyer").click(function(){
valid = true;
if($("#nom").val() == "" ){
$("#nom").css("border-color","#b60c00");
valid=false;
}
else if(!$("#nom").val().match(/^[a-z]+$/i)){
$("#nom").css("border-color","#b60c00");
valid=false;
}
else{
$("#nom").css("border-color","#009E00");
}
if($("#adresse").val() == "" ){
$("#adresse").css("border-color","#b60c00");
valid=false;
}
else{
$("#adresse").css("border-color","#009E00");
}
return valid;
});
});
[/javascript]
Il fraudais que lors d'une erreur on utilise la classe inputWarning, et lors d'un succès on utilise la classe inputSuccess
Pourriez vous me dire comment m'y prendre?
Merci beaucoup
Cordialement