[RESOLU] Changer la classe d'un input en cas d'erreur ou de succes

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Changer la classe d'un input en cas d'erreur ou de succes

Re: [RESOLU] Changer la classe d'un input en cas d'erreur ou

par Fre3z69 » 28 sept. 2012, 14:56

Trouver!

addClass de jquery.

Changer la classe d'un input en cas d'erreur ou de succes

par Fre3z69 » 28 sept. 2012, 08:07

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