Bug Tracker

Ticket #3527: subforms.2.htm

File subforms.2.htm, 7.1 KB (added by antix, 11 years ago)

Updated example + patch

Line 
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5    <title>Sub-forms</title>
6    <style type="text/css">
7    </style>
8   
9    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
10    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
11    <!--<script type="text/javascript" src="W:\Projects\3.5\Antix.CV.Web\Content\Scripts\jquery.validate.js"></script>-->
12   
13    <script type="text/javascript">
14        /*  Patch
15            =========================== */
16
17        // get the elements in the form, fixes selection for nested forms in IE
18        function getElements(form) {
19            if ($.browser.msie) {
20                return $(form).find(":input")
21                            .not($(form).find("form :input"))
22                            .not(":reset, [disabled]");
23            } else { return $(form.elements); }
24        }
25
26        // only select elements within the form, exclude nested ones, IE problem only
27        $.validator.prototype.elements = function() {
28            var validator = this,
29                                rulesCache = {};
30
31            // select all valid inputs inside the form
32            return getElements(this.currentForm)
33                    .not(":submit, :image")
34                    .not(this.settings.ignore)
35                    .filter(function() {
36                        !this.name && validator.settings.debug && window.console && console.error("%o has no name assigned", this);
37
38                        // select only the first element for each name, and only those with rules specified
39                        if (this.name in rulesCache || !validator.objectLength($(this).rules()))
40                            return false;
41
42                        rulesCache[this.name] = true;
43                        return true;
44                });
45                }
46
47            $.fn.serializeArray = function() {
48                return this.map(function() {
49                    return jQuery.nodeName(this, "form") ?
50                                    jQuery.makeArray(getElements(this)) : this;
51                })
52            }
53           
54        // allow adding a validator to multiple forms at once
55            $.fn.validate = function(options) {
56
57                // if nothing is selected, return nothing; can't chain anyway
58                if (!this.length) {
59                    options && options.debug && window.console && console.warn("nothing selected, can't validate, returning nothing");
60                    return;
61                }
62
63                this.each(function() {
64                    var $this = $(this);
65
66                    // check if a validator for this form was already created
67                    var validator = $.data($this, 'validator');
68                    if (validator) { return; }
69
70                    validator = new $.validator(options, this);
71                    $.data(this, 'validator', validator);
72
73                    if (validator.settings.onsubmit) {
74
75                        // allow suppresing validation by adding a cancel class to the submit button
76                        $this.find("input, button").filter(".cancel").click(function() {
77                            validator.cancelSubmit = true;
78                        });
79
80                        // validate the form on submit
81                        $this.submit(function(event) {
82                            if (validator.settings.debug)
83                            // prevent form submit to be able to see console output
84                                event.preventDefault();
85
86                            function handle() {
87                                if (validator.settings.submitHandler) {
88                                    validator.settings.submitHandler.call(validator, validator.currentForm);
89                                    return false;
90                                }
91                                return true;
92                            }
93
94                            // prevent submit for invalid forms or custom submit handlers
95                            if (validator.cancelSubmit) {
96                                validator.cancelSubmit = false;
97                                return handle();
98                            }
99                            if (validator.form()) {
100                                if (validator.pendingRequest) {
101                                    validator.formSubmitted = true;
102                                    return false;
103                                }
104                                return handle();
105                            } else {
106                                validator.focusInvalid();
107                                return false;
108                            }
109                        });
110                    }
111                });
112
113                return this;
114            }
115
116        /*  =========================== */
117
118        $(document).ready(function() {
119            var $list = $("#List"),
120                $detail = $("#Detail"),
121                $detailName = $detail.find("#Name"),
122                $detailDescription = $detail.find("#Description");
123
124            $list.add($detail)
125                .click(function(e) { e.stopPropagation() })
126                .validate({
127                    submitHandler: function(form) {
128                        var $form = $(form);
129
130                        alert(form.id.concat("\n", $form.serialize()));
131
132                        if (form.id == "Detail") { $form.hide("fast"); }
133                        return false;
134                    }
135                });
136
137            $detail.hide();
138            $list.find("li").click(function() {
139                var $this = $(this),
140                    $title = $this.find("span");
141
142                $detail.hide("fast",
143                    $detail.css("display") == "none" || $this.find("form").length == 0
144                    ? function() {
145                        $detailName
146                            .unbind("change")
147                            .change(function() { $title.text(this.value) })
148                            .val($title.text());
149                        $detailDescription
150                            .unbind("change")
151                            .change(function() { $this.data("description", this.value) })
152                            .val($this.data("description") || "");
153
154                        $this.append($detail);
155                        $detail.show("slow");
156                    }
157                    : "");
158            });
159        });
160    </script>
161</head>
162<body>
163    <form id="List">
164        <ul>
165            <li><input name="active_1" type="checkbox" checked="checked" /><span>Item 1</span></li>
166            <li><input name="active_2" type="checkbox" checked="checked" /><span>Item 2</span></li>
167            <li><input name="active_3" type="checkbox" checked="checked" /><span>Item 3</span></li>
168        </ul>
169        <p><input name="submit" type="submit" value="submit detail form" /></p>
170    </form>
171   
172    <form id="Detail">
173        <p>
174            <label for="Name">Name</label>
175            <input id="Name" name="Name" class="required" />
176        </p>
177        <p>
178            <label for="Description">Description</label>
179            <textarea id="Description" name="Description" class="required"></textarea>
180        </p>
181        <p><input name="submit" type="submit" value="submit list form" /></p>
182    </form>
183</body>
184</html>