Modifier une class suite à requête ajax
Bonjour a tous
je travail sur un formulaire d'inscription.
j'utilise les class de bootstrap pour mettre un peu de css dans celui ci.
le traitement de mon formulaire renvois une erreur comme par exemple un mot de passe trop court.
voici le formulaire
Code:
1
2
3
4
5
6
7
8
9
10
11
| <form id="register_form" onsubmit="return false;" style="margin:10px;">
<div class="form-group">
<label for="pass1">Mot de passe</label>
<input type="password" placeholder="6 caractères minimum" id="pass1" name="pass1" class="form-control" required/>
<small id="output_pass1"></small>
</di>
<div id="status">
Remplir tous les champs
</div>
<input type="submit" id="bRegister" class="btn btn-info" value="Inscription" />
</form> |
on utilise une requet ajax pour tester cette case
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
$(document).ready(function(){
$("#register_form input").focus(function(){
$("#status").fadeOut(800);
});
$("#pass1").keyup(function(){
//on verifie si le mot de passe est ok
if($(this).val().length < 6){
$("#output_pass1").css("color", "red").html("<br/>trop court (6 caracteres minimum)");
} else if ($("#pass2").val() != "" && $("#pass2").val() != $("#pass1").val()){
$("#output_pass1").html("<br/>les deux mots de passe sont différents");
$("#output_pass2").html("<br/>les deux mots de passe sont différents");
} else {
$("#output_pass1").html('<img src="theme/default/img/check.png" alt="" />');
}
});
$("#pass2").keyup(function(){
/* On verifie si les deux mot de passe sont identique */
check_password();
});
function check_password(){
$.ajax({
type: "post",
url: "index.php",
data: {
'pass1_check' : $("#pass1").val(),
'pass2_check' : $("#pass2").val()
},
success: function(data){
if(data == "success"){
$("#output_pass2").html('<img src="theme/default/img/check.png" alt="valide" />');
$("#output_pass1").html('<img src="theme/default/img/check.png" alt="valide" />');
} else {
$("#output_pass2").css("color", "red").html(data);
}
}
});
}
}); |
actuellement j'affiche une image pour dire que c'est ok ou un message d'erreur dans le output_pass
mais je souhaiterais remplacer cela par un autre style.
par exemple quand on clique dans la case elle est bleu par defaut.
si le mot de pass remplis les critere mon met en vert
sinon en rouge
comme ça je ne met que le message d'erreur dans la div status en fin de formulaire.
merci de votre aide et surtout de vos explications.
