Bug Tracker

Ticket #3527: subforms.3.htm

File subforms.3.htm, 8.1 KB (added by antix, 11 years ago)

bug fix + css

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