Validation input ajout addMethod

Version imprimable

bonjour,
j'ai utilisé ce plug-in : http://jqueryvalidation.org/documentation/
la fonction addMethod ne fonctionne pas :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $("#formlogin").validate({ meta: "validate" }); $.validator.addMethod("qToolTip", function(value, element) { alert(''); }); });
merci
en attendant :arf:

08/04/2014, 11h54
Jodu42

Salut,

La console de l'utilitaire d'aide au développement te renvoie des erreurs ?
Si oui, lesquelles ?

As-tu bien inclus d'abord jquery, puis ton plugin dans ton code ?

merci pour votre réponse,
la console ne renvoie aucune erreur, j'ai vérifié même les chemis des fichiers js avec firebug,
mon objectif, c'est bien afficher les erreurs dans les tooltips,
-
j'ai essayé ce code inspiré dans ce tuto : http://icanmakethiswork.blogspot.co....o-display.html

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
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#formlogin").validate({
                    showErrors: function(errorMap, errorList) {
 
                        // Clean up any tooltips for valid elements
                        $.each(this.validElements(), function (index, element) {
                            var $element = $(element);
 
                            $element.data("title", "") // Clear the title - there is no error associated anymore
                            .removeClass("error")
                            .tooltip("destroy");
                        });
 
                        // Create new tooltips for invalid elements
                        $.each(errorList, function (index, error) {
                            var $element = $(error.element);
 
                            $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
                        });
                    },
 
                    submitHandler: function(form) {
                        alert("This is a valid form!");
                    }
                });
 
 
            });
 
        </script>
        <link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
    </head>
 
    <body>
        <form id="formlogin">
            <input
                data-msg-maxlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
                data-msg-minlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
                data-msg-required="The StringLengthAndRequiredDemo field is required."
                data-rule-maxlength="10"
                data-rule-minlength="5"
                data-rule-required="true"
                id="StringLengthAndRequiredDemo" name="StringLengthAndRequiredDemo" type="text" value="" />
            <button  type="submit" >test</button>
 
        </form>
    </body>
</html>

il affiche toujours,

Code:

alert("This is a valid form!");

j'ai trouvé la solution à mon problème voici le code exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
 
        <script src="js/jquery.js"></script>
        <script src="js/qtip.js"></script>
        <script src="js/jquery.validate.js"></script>
        <script src="js/jquery.metadata.js"></script>
        <link type="text/css" href="css/qtip.css" rel="stylesheet">
        <style>
            .borderError {
                border: 1px solid #ba4343;
            }
        </style>
        <script type="text/javascript">

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
            var title = js_er_title ='Error';
            $(document).ready(function(){
                $('#form1').validate({
                    meta: "validate",
                    errorPlacement: function(error, element) {
                        var tooltips = $(element).qtip({
                            content: {
                                text: $(error).text(),
                                title: js_er_title
                            },
                            style: {
                                classes: 'qtip-red'
                            },
                            position: {
                                my: 'right center', // Position my top left...
                                at: 'left center', // at the bottom right of...
                                target: $(element) // my target
                            }
                        });
                        var api = tooltips.qtip('api');
                    },
                    highlight: function(element, errorClass) {
                         $(element).addClass('borderError');
                    },
                    unhighlight: function(element, errorClass) {
                        $(element).removeClass('borderError');
                        $(element).qtip('destroy', true);
                    }
                });
            });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
        </script>
    </head>
    <body>
 
        <form id="form1" style="margin: 120px">
            <input name="a" id="a" value="" class="{validate:{required:true, email:true, messages:{required:'xx x', email:'emmm'}}}" type="text"  /><br />
            <input name="b" id="b" value="" class="{validate:{required:true, messages:{required:'y yy'}}}" type="text"  /><br />
            <textarea name="nn" id="message" class="{validate:{required:true, messages:{required:'mmmmm'}}}" cols="45" rows="3"></textarea>
            <button type="submit">test</button>
        </form>
    </body>
</html>