Afficher div après validation

**sky88** · 16/09/2015, 12h54

bonjour à tous
voici mon code

Code html :

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
44
45
46
47
48
49
<head>
    <link href="aa/bootstrap.css" rel="stylesheet" />
    <link href="aa/bootstrap.min.css" rel="stylesheet" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="aa/jquery-1.9.0.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script type="text/javascript" src="aa/ValidationFormScript.js"></script>
</head>
 
<body>
    <form id="defaultForm" method="post" action="" class="form-horizontal">
 
 
        <div class="form-group control-group" style="margin-bottom: 0px;">
            <div class="col-sm-5  ">
                <input style="margin-left:20px;" required data-fv-notempty-message="Veuillez entrer l'ancien mot de passe" type="password" class="form-control input-xlarge focused " name="anc_pw" />
                <div id="anpw">
                    <p style="margin-left:160px;color: #a94442;font-weight:bold;margin-top:10px;font-size: smaller; ">dddddddd</p>
                </div>
            </div>
        </div>
        <div class="form-group control-group">
            <div style="width:100%;margin-left:-15px;margin-left:-20px; margin-top: -25px;" class="col-sm-9 col-sm-offset-3">
                <input type="submit" name="enregistrer" class="btn btn-primary" style="width:90px;margin-left:180px;" value="Enregistrer" />
            </div>
        </div>
        <div class="control-group border-div" id="pw" style="overflow: hidden; height:280px; display:none; margin-top:10px;">
            hhhh
        </div>
 
    </form>
    <script src="js/jquery-1.9.0.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="js/bootstrap.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pw').show(); // On cache ta div au chargement de la page
            $(".form").validate({
                submitHandler: function(form) {
                    $('#pw').show();
                }
            });
        });
    </script>
 
</body>
 
</html>

je veux quand je clique sur enregistrer j'affiche une div après validation
mais ça ne marche pas???

**flavors** · 16/09/2015, 13h36

Bonjour,
J'ai regardé de mon oeil de débutant et j'ai vu que tu as mis :

Envoyé par sky88

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
$('#pw').show(); // On cache ta div au chargement de la page
$(".form").validate({
   submitHandler: function(form) {
      $('#pw').show();

Est-ce normal qu'il y ait 2 fois "show()"? Le 1er au chargement ne devrait pas être "hide()" puis le 2eme "show()" pour la validation?
Ou alors j'ai rien compris><.

**Theta** · 16/09/2015, 14h37

Il ne faut pas la supprimer mais remplacer le premir show par hide.

Une autre option, préférable, et de rajouter un peu de css dans la balise : style="display: none;".
Ainsi, la div ne sera pas affichée du tout, alors qu'en la cachant avec jquery, elle sera affichée pendant le chargement de la page, et ne disparaitra que quand le script sera exécuté.

**sky88** · 16/09/2015, 15h03

voici mon nouveau code:

Code html :

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
<head>
    <link href="aa/bootstrap.css" rel="stylesheet" />
    <link href="aa/bootstrap.min.css" rel="stylesheet" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="aa/jquery-1.9.0.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script type="text/javascript" src="aa/ValidationFormScript.js"></script>
</head>
 
<body>
    <form id="defaultForm" method="post" action="" class="form-horizontal">
 
        <div class="control-group border-div" id="pw" style="overflow: hidden; height:20px;  display:none; margin-top:200px;">
            hhhh
        </div>
        <div class="form-group control-group" style="margin-bottom: 0px;">
            <div class="col-sm-5  ">
                <input style="margin-left:20px;" required data-fv-notempty-message="Veuillez entrer l'ancien mot de passe" type="password" class="form-control input-xlarge focused " name="anc_pw" />
                <div id="anpw">
                    <p style="margin-left:160px;color: #a94442;font-weight:bold;margin-top:10px;font-size: smaller; ">dddddddd</p>
                </div>
            </div>
        </div>
        <div class="form-group control-group">
            <div style="width:100%;margin-left:-15px;margin-left:-20px; margin-top: -25px;" class="col-sm-9 col-sm-offset-3">
                <input type="submit" name="enregistrer" class="btn btn-primary" style="width:90px;margin-left:180px;" value="Enregistrer" />
            </div>
        </div>
 
 
    </form>
    <script src="js/jquery-1.9.0.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="js/bootstrap.js"></script>
 
    <script type="text/javascript">

Code :

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

1
2
3
4
5
6
7
8
 $(document).ready(function() {
     $('#pw').hide(); // On cache ta div au chargement de la page
     $(".form").validate({
         submitHandler: function(form) {
             $('#pw').show();
         }
     });
 });

Code html :

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

1
2
3
</script>
</body>
</html>

mais ça ne marche pas le display de mon div reste toujour none

**flavors** · 16/09/2015, 15h31

Je n'en suis pas sûre mais dans ce cas ce ne serait pas la propriété de display qu'il faudrait changer?
Par exemple "display:block" comme c'est un div.