There probably isn't a best practice. The example you link to is just
that, an example. But I see no reason why you shouldn't use that to
get started and build whatever you need above it. The validation
plugin itself is a good choice anyway.
Jörn
On Mon, Mar 30, 2009 at 2:01 PM, Kreeves <kree...@gmail.com> wrote:
>
> There is plenty of discussion on "Dynamic form validation" in this
> group, but my question is of a slightly different nature.
>
> I'm attempting to create a page that will build the form based on user
> input. IE: User is prompted with one search box with several
> options. They can then hit an "Add search" and be allowed another
> search box to further narrow down their search results. (The web-app
> is a report utility).
>
> I've looked around for websites that do this in an attempt to get an
> idea of what might be the best way of pulling it off. One website I
> ran across did it like so...
>
> <script type="text/javascript">
> // only for demo purposes
> $.validator.setDefaults({
> submitHandler: function() {
> alert("submitted!");
> }
> });
> $.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().next() );
> },
> highlight: function(element, errorClass) {
>
> $(element).addClass(errorClass).parent().prev().children
> ("select").addClass(errorClass);
> }
> });
>
> var template = jQuery.format($("#template").val());
> function addRow() {
> $(template(i++)).appendTo("#orderitems tbody");
> }
>
> var i = 1;
> // start with one row
> addRow();
> // add more rows on click
> $("#add").click(addRow);
>
> // check keyup on quantity inputs to update totals field
> $("#orderform").delegate("keyup", "input.quantity", function(event) {
> var totals = 0;
> $("#orderitems input.quantity").each(function() {
> totals += +this.value;
> });
> $("#totals").attr("value", totals).valid();
> });
>
> });
> </script>
>
> They then wrap the search fields in a textarea and label it a
> "template". Note the line ABOVE that reads "var template =
> jQuery.format"
>
> <textarea style="display:none" id="template">
> <tr>
> <td>
> <label>{0}. Item</label>
> </td>
> <td class='type'>
> <select 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" min="1"
> id="item-quantity-{0}"
> name="item-quantity-{0}" />
> </td>
> <td class='quantity-error'></td>
> </tr>
> </textarea>
>
> The original page is at
> http://jquery.bassistance.de/validate/demo/dynamic-totals.html.
>
> Is this best practice? Is there a different way to do this? It
> really just seems like a hacked up way to do it.
>
> Thanks.
>
