Exactly what I wanted to know. I'm a bit new to the jQuery scene and
I was not certain if there might be a cleaner way of accomplishing
this behavior.
Thanks!
On Mar 30, 2:20 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:
> 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
> > athttp://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.
