Validation input ajout addMethod

**ouldfella** · 07/04/2014, 17h27

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

Code :

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

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

**Jodu42** · 08/04/2014, 11h54

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 ?

**ouldfella** · 09/04/2014, 11h07

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 :

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

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

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

**ouldfella** · 14/04/2014, 12h48

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

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

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

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

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>

Validation input ajout addMethod

jQuery

Discussions similaires

Partager

Partager