Bug Tracker

Ticket #2424: test.html

File test.html, 1.6 KB (added by vinipitta, 15 years ago)

Showcase of the bug.

Line 
1<!--
2Validate bug showcase.
3Author: Vinícius Pitta Lima de Araújo (contato at viniciusaraujo dot net
4Description: This showcase demostrate how the validate plugin behave with custom rules when the maxlength property is defined.
5-->
6<html>
7        <head>
8                <title>validate custom method bug</title>
9                <meta http-equiv="content-type" content="text/html; charset=utf-8">
10                <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
11                <script type="text/javascript" src="jquery.validate.js"></script>
12                <script type="text/javascript">
13                        $().ready(function() {
14                                $.validator.addMethod("customRule", function (value, element) {
15                                        alert(element.name + ' checked!');
16                                        return !this.optional(element);
17                                }, "Invalid field!");
18                               
19                                $("#testForm").validate({
20                                        rules : {
21                                                tf1 : "customRule",
22                                                tf2 : "customRule"
23                                        },
24                                        submitHandler : function(f) {
25                                                alert('Form submitted');
26                                        }
27                                });
28                        });
29                </script>
30        </head>
31        <body>
32                <form id="testForm">
33                        <p>
34                                This text has the <em>maxlength</em> property setted and will the custom rule will work only when the field is filled
35                                because if the field is empty the maxlength rule will return a <em>dependency-mismatch</em> and stop the execution of the check method.
36                        </p>
37                        <label for="tf1">Text Field 1</label><input type="text" id="tf1" name="tf1" maxlength="50"/><br/>
38                       
39                        <p>
40                                This one will ever work because it have not the <em>maxlength</em> property.
41                        </p>
42                        <label for="tf2">Text Field 2</label><input type="text" id="tf2" name="tf2" />
43                        <br/>
44                        <button type="submit">Test it!</button>
45                </form>
46        </body>
47</html>