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