Changeset 4587 for trunk/plugins/validate/demo/dynamic-totals.html

Timestamp:

02/01/08 23:30:06 (1 year ago)

Author:

joern.zaefferer

Message:

* Bundled delegeate plugin with validate plugin - its always required anyway
* Added jQuery.validator.autoCreateRanges property, defaults to false, enable to convert min/max to range and minlength/maxlength to rangelength; this basically fixes the issue introduced by automatically creating ranges in 1.2
* Fixed optional-methods to not highlight anything at all if the field is blank, that is, don't trigger success
* Fixed url and email validation to require TLD (actually to require domain label); 1.2 version (TLD is optional) is moved to additionals as url2 and email2
* Fixed dynamic-totals demo in IE6/7 and improved templating, using textarea to store multiline template and string interpolation

Files:

• trunk/plugins/validate/demo/dynamic-totals.html (modified) (5 diffs)

trunk/plugins/validate/demo/dynamic-totals.html

@@ -7 +7 @@
 
 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
+
 <script src="../lib/jquery.js" type="text/javascript"></script>
-<script type="text/javascript" src="../lib/jquery.delegate.js"></script>
 <script src="../jquery.validate.js" type="text/javascript"></script>
 
@@ -21 +21 @@
     
 $().ready(function() {
-    var validator = $("#orderform").validate({
+    $("#orderform").validate({
         errorPlacement: function(error, element) {
             error.appendTo( element.parent().parent().next().find("td." + element.parent().attr("class") + "-error") );
@@ -27 +27 @@
     });
     
-    // TODO improve templating code
+    var template = jQuery.format($("#template").val());
     function addRow() {
-        // add another input with a generated name and remove the id to avoid duplicates
-        var items = $("#items").clone().attr("id", "").attr("name", "item-type-" + i).show();
-        $("#template, #template+").clone().attr("id", "").show()
-            .find("label").text((i + 1) + ". Item").end()
-            .find(".type").append( items ).end()
-            .find("input.quantity").attr("name", "item-quantity-" + i).end()
-            .appendTo("#orderitems tbody");
-        i++;
+        $(template(i++)).appendTo("#orderitems tbody");
     }
     
-    var i = 0;
+    var i = 1;
     // start with one row
     addRow();
@@ -85 +78 @@
 <div id="main">
 
-<table style="display:none">
-    <tr id="template">
+<textarea style="display:none" id="template">
+    <tr>
         <td>
-            <label></label>
+            <label>{0}. Item</label>
         </td>
-        <td class='type'></td>
+        <td class='type'>
+            <select class="required" name="item-type-{0}">
+                <option value="">Select...</option>
+                <option value="0">Learning jQuery</option>
+                <option value="1">jQuery Reference Guide</option>
+                <option value="2">jQuery Cookbook</option>
+                <option vlaue="3">jQuery In Action</option>
+                <option value="4">jQuery For Designers</option>
+            </select>
+        </td>
         <td class='quantity'>
-            <input size='4' class="quantity required" min="1" />
+            <input size='4' class="quantity required" min="1" name="item-quantity-{0}" />
         </td>
     </tr>
@@ -101 +103 @@
         <td class='quantity-error'>&nbsp;</td>
     </tr>
-</table>
-
-<select id="items" class="required" style="display:none">
-    <option value="">Select...</option>
-    <option value="0">Learning jQuery</option>
-    <option value="1">jQuery Reference Guide</option>
-    <option value="2">jQuery Cookbook</option>
-    <option vlaue="3">jQuery In Action</option>
-    <option value="4">jQuery For Designers</option>
-</select>
+</textarea>
 
 <form id="orderform" class="cmxform" method="get" action="foo.html">