Discussion :

[lifala]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[lifala]

voila ce que j'ai utiliser pour faire la modification de la class

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#pseudo").addClass("is-invalid");

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#pseudo").addClass("is-valid");

Donc voila j'ai la balise vert ou rouge en fonction du retour

mais le soucis c'est si je rentre quelque chose de valide derrière la mise a jour ne ce fait pas.

si j'ai fais une erreur ben ça reste rouge ??

[Invité]

Bonjour,

il existe aussi :

• .removeClass()
• .toggleClass()