Bug Tracker

Ticket #3527: subforms.4.htm

File subforms.4.htm, 8.8 KB (added by antix, 11 years ago)

missed part of the serializeArray function override in prev

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        body{background-color:#fff}
8        form{margin:0}
9        form p,form ul{padding:5px 100px;margin:0;min-width:400px}
10        form li{margin:0;padding:0;border-top:solid 1px #eee;list-style-type:none}
11        form li>span{display:inline-block;width:90%;padding:5px;cursor:pointer}
12        form li>input{margin:5px 0 5px 5px;}
13        form label{float:left;width:90px;margin-left:-98px;padding:2px;text-align:right}
14        form label.error{display:inline-block;float:none;width:auto;margin:0 -98px 0 auto;color:#900;text-align:left}
15        .hover{background-color:#eef3ff;}
16    </style>
17   
18    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
19    <!--<script type="text/javascript" src="jquery.js"></script>-->
20    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
21   
22    <script type="text/javascript">
23        /*  Patch
24            =========================== */
25
26        // get the elements in the form, fixes selection for nested forms in IE
27        function getElements(form) {
28            if ($.browser.msie) {
29                return $(form).find(":input")
30                            .not($(form).find("form :input"))
31                            .not(":reset, [disabled]");
32            } else { return $(form.elements); }
33        }
34
35        // only select elements within the form, exclude nested ones, IE problem only
36        $.validator.prototype.elements = function() {
37            var validator = this,
38                                rulesCache = {};
39
40            // select all valid inputs inside the form
41            return getElements(this.currentForm)
42                    .not(":submit, :image")
43                    .not(this.settings.ignore)
44                    .filter(function() {
45                        !this.name && validator.settings.debug && window.console && console.error("%o has no name assigned", this);
46
47                        // select only the first element for each name, and only those with rules specified
48                        if (this.name in rulesCache || !validator.objectLength($(this).rules()))
49                            return false;
50
51                        rulesCache[this.name] = true;
52                        return true;
53                });
54                }
55
56                $.fn.serializeArray = function() {
57                    return this.map(function() {
58                        return jQuery.nodeName(this, "form") ?
59                                    jQuery.makeArray(getElements(this)) : this;
60                    })
61                    .filter(function() {
62                        return this.name && !this.disabled &&
63                                    (this.checked || /select|textarea/i.test(this.nodeName) ||
64                                            /text|hidden|password/i.test(this.type));
65                    })
66                    .map(function(i, elem) {
67                        var val = jQuery(this).val();
68                        return val == null ? null :
69                                    val.constructor == Array ?
70                                            jQuery.map(val, function(val, i) {
71                                                return { name: elem.name, value: val };
72                                            }) :
73                                            { name: elem.name, value: val };
74                    }).get();
75                }
76
77            $.validator.prototype.clearErrors = function() {
78                this.submitted = {};
79                this.prepareForm();
80                this.hideErrors();
81                this.elements().removeClass(this.settings.errorClass);
82            }
83           
84        // allow adding a validator to multiple forms at once
85            $.fn.validate = function(options) {
86
87                // if nothing is selected, return nothing; can't chain anyway
88                if (!this.length) {
89                    options && options.debug && window.console && console.warn("nothing selected, can't validate, returning nothing");
90                    return;
91                }
92
93                this.each(function() {
94                    var $this = $(this);
95
96                    // check if a validator for this form was already created
97                    var validator = $.data($this, 'validator');
98                    if (validator) { return; }
99
100                    validator = new $.validator(options, this);
101                    $.data(this, 'validator', validator);
102
103                    if (validator.settings.onsubmit) {
104
105                        // allow suppresing validation by adding a cancel class to the submit button
106                        $this.find("input, button").filter(".cancel").click(function() {
107                            validator.cancelSubmit = true;
108                        });
109
110                        // validate the form on submit
111                        $this.submit(function(event) {
112                            if (validator.settings.debug)
113                            // prevent form submit to be able to see console output
114                                event.preventDefault();
115
116                            function handle() {
117                                if (validator.settings.submitHandler) {
118                                    validator.settings.submitHandler.call(validator, validator.currentForm);
119                                    return false;
120                                }
121                                return true;
122                            }
123
124                            // prevent submit for invalid forms or custom submit handlers
125                            if (validator.cancelSubmit) {
126                                validator.cancelSubmit = false;
127                                return handle();
128                            }
129                            if (validator.form()) {
130                                if (validator.pendingRequest) {
131                                    validator.formSubmitted = true;
132                                    return false;
133                                }
134                                return handle();
135                            } else {
136                                validator.focusInvalid();
137                                return false;
138                            }
139                        });
140                    }
141                });
142
143                return this;
144            }
145
146        /*  =========================== */
147
148            $(document).ready(function() {
149                var $list = $("#List"),
150                $detail = $("#Detail"),
151                $detailName = $detail.find("#Name"),
152                $detailDescription = $detail.find("#Description");
153
154                $list.add($detail)
155                .validate({
156                    submitHandler: function(form) {
157                        var $form = $(form);
158
159                        alert(form.id.concat("\n", $form.serialize()));
160
161                        if (form.id == "Detail") { $form.hide("fast"); }
162                        return false;
163                    }
164                });
165
166                $detail.hide();
167                $list.find("li span")
168                    .mouseover(function() { $(this).addClass("hover") })
169                    .mouseout(function() { $(this).removeClass("hover") })
170                    .click(function() {
171                        var $title = $(this),
172                    $listItem = $title.parent();
173
174                        $detail.hide("fast",
175                    $detail.css("display") == "none" || $listItem.find("form").length == 0
176                    ? function() {
177                        $detailName
178                            .unbind("change")
179                            .change(function() { $title.text(this.value) })
180                            .val($title.text());
181                        $detailDescription
182                            .unbind("change")
183                            .change(function() { $listItem.data("description", this.value) })
184                            .val($listItem.data("description") || "");
185
186                        $listItem.append($detail);
187
188                        $detail.data("validator").clearErrors();
189                        $detail.show("slow");
190                    }
191                    : "");
192                    });
193            });
194    </script>
195</head>
196<body>
197    <form id="List">
198        <ul>
199            <li><input name="active_1" type="checkbox" checked="checked" /><span>Item 1</span></li>
200            <li><input name="active_2" type="checkbox" checked="checked" /><span>Item 2</span></li>
201            <li><input name="active_3" type="checkbox" checked="checked" /><span>Item 3</span></li>
202        </ul>
203        <p>Click on an item in the list to view its details</p>
204        <p><input name="submit" type="submit" value="submit list form" /></p>
205    </form>
206   
207    <form id="Detail">
208        <p>
209            <label for="Name">Name</label>
210            <input id="Name" name="Name" class="required" />
211        </p>
212        <p>
213            <label for="Description">Description</label>
214            <textarea id="Description" name="Description" class="required"></textarea>
215        </p>
216        <p>
217            <label for="Type">Type</label>
218            <select id="Type" name="Type">
219                <option>one</option>
220                <option>two</option>
221                <option>three</option>
222            </select>
223        </p>
224        <p><input name="submit" type="submit" value="submit detail form" /></p>
225    </form>
226</body>
227</html>