6

I have a form where a user can keep adding items to a list. When they go to submit this page, I want to validate that this list actually has items in it (not the individual items as they've already been validated). Each item gets added to a new row in a table with the TR having an extra attribute of "action"... so it looks like: 

<tr action="whatever">...</tr>

What I was attempting to do is add a custom addMethod that called a function which would count the number of rows with action as an attribute:

$("#tableID").find("tr[action]").length

and if that length is greater than 0, it returns true, otherwise, false.

This works fine outside of the validator calls but for some reason it completely skips over it.

I could really use an example or some insight into how to make it validate this rule even though it is not a form element specifically.

Scaled down code:

*note that I already have defaults being setup for messages and what not.

$.validator.addMethod("validProductList", function (value, element) {
        return this.optional(element) || validateProductList();
    }, "You have no products in your list");

$("#processForm").click(function () {
        $("#pageForm").validate({
            submitHandler: function () {
                $("#errors").hide();
                //processPage();
            },
            rules: {
                //other rules,
                validProductList: true
            }
        });
    });

function validateProductList() {
    var isValid = false;
    var useList = $("#tblAddedProducts").find("tr[action]").length;
    if (useList > 0) { isValid = true; }
    return isValid;
}
Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
Joshua
  • 490
  • 4
  • 13

2 Answers2

8

The reason this doesn't work is because the rules object expects its children to be form field names (not rule names). It looks like validate isn't capable of validating non-form elements. However, there's a way you can get around this:

  1. Add an <input type='hidden' /> to your form that you update depending on the state of the list. In other words, every time you add or remove a list item, set the value of that input. This has an obvious disadvantage; your validation code is now spread across two actions (adding and removing list items). However, I imagine you already have code that handles adding/removing, you could add a common method that re-evaluates the state of the aforementioned input.

  2. Make that input required and use .validate() normally.

Here's a really rough working example: http://jsfiddle.net/dT6Yd/

You can make item (1) a little easier if you use a framework like knockoutjs. You could tell that framework to "observe" your list and update the input automatically without you having to keep track of it.

Not the cleanest way of handling the problem, but I've seen it done this way before and it seems to work well enough.

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • Le sigh. Thank you! I was afraid that was what needed to happen and I really didn't like adding a single hidden field just to validate another. – Joshua Jul 08 '11 at 14:55
  • 1
    The hidden field trick doesn't work any more, it's not validating hidden inputs anymore in the latest version. – floriank Sep 28 '16 at 09:37
  • Actually, it does. You just need to override the `ignore` setting so that it doesn't ignore hidden fields. You could set `ignore` to `.ignore` if you still need to ignore some fields (and set their class to `ignore`). – blatt Nov 06 '18 at 15:14
1

I've found a solution in the source code:

return $( this.currentForm )
        .find( "input, select, textarea, [contenteditable]" )

So jquery-validation takes only these types of elements.. I simply added the attribute "contenteditable" to the element I want to validate and added a custom validator. 

<div contenteditable data-rule-raty="true" data-score="0" data-plugin="rating"></div>

$.validator.addMethod("raty-required", function (value, element, regexpr) {
  return $(element).raty("score") >= 0;
}, "Bitte Bewertung abgegeben");
Simon Ludwig
  • 1,754
  • 1
  • 20
  • 27
  • Learned the hard way: Be sure to use an element where `name` is a valid attribute: ` – chrisdillon Jun 10 '17 at 11:08