Afficher div après validation

Version imprimable

bonjour à tous
voici mon code

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
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???

16/09/2015, 13h36
flavors
Bonjour,
J'ai regardé de mon oeil de débutant et j'ai vu que tu as mis :
Citation:
Envoyé par sky88

Code:

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><.
16/09/2015, 14h24
sky88

merci à vous
même quand je supprime la 1ere ligne ça na marche pas:(
16/09/2015, 14h37
Theta

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é.

voici mon nouveau code:

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

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:

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

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

16/09/2015, 15h31
flavors

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.
16/09/2015, 15h33
sky88

comment je peux changer cette propriété dans jquery
16/09/2015, 15h49
flavors

Comme je vous l'ai dis, je n'en suis pas sûre (mon niveau ne me permet pas d'affirmer les choses).

D'aprés la doc (http://api.jquery.com/show/) :
$( ".target" ).show();
The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css( "display", "block !important") should you wish for .show() to function correctly.

Donc essayez avec : ".css( "display", "block")"