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

Timestamp:

02/05/08 19:26:35 (1 year ago)

Author:

joern.zaefferer

Message:

Enhanced dynamic-totals demo with an example of a single message for two fields

Files:

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

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

@@ -19 +19 @@
 });
 $.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!");
-    
+
+$.validator.addMethod("quantity", function(value, element) {
+    return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
+}, "Please select both the item and its amount.");
+
 $().ready(function() {
     $("#orderform").validate({
         errorPlacement: function(error, element) {
-            error.appendTo( element.parent().parent().next().find("td." + element.parent().attr("class") + "-error") );
+            error.appendTo( element.parent().next() );
+        },
+        highlight: function(element, errorClass) {
+            $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
         }
     });
@@ -70 +77 @@
 em.error { color: black; }
 #warning { display: none; }
+select.error {
+    border: 1px dotted red;
+}
 </style>
 
@@ -84 +94 @@
         </td>
         <td class='type'>
-            <select class="required" name="item-type-{0}">
+            <select name="item-type-{0}">
                 <option value="">Select...</option>
                 <option value="0">Learning jQuery</option>
@@ -94 +104 @@
         </td>
         <td class='quantity'>
-            <input size='4' class="quantity required" min="1" name="item-quantity-{0}" />
+            <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}" />
         </td>
-    </tr>
-    <tr>
-        <!-- keep empty label to avoid height changes when showing error messages -->
-        <td><label style="visibility:hidden">&nbsp;</label></td>
-        <td class='type-error'>&nbsp;</td>
-        <td class='quantity-error'>&nbsp;</td>
+        <td class='quantity-error'></td>
     </tr>
 </textarea>
@@ -118 +123 @@
                     <td colspan="2"><label>Totals (max 25)</label></td>
                     <td class="totals"><input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4' /></td>
-                </tr>
-                <tr>
-                    <td colspan="2">&nbsp;</td>
                     <td class="totals-error"></td>
                 </tr>