Forum d'entraide PHPFrance

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

Trouver!

addClass de jquery.