14

I'm trying to make the dropdown required if the #category field is empty.

Thanks!

JQUERY ATTEMPT #1:

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: function(element) {
                return $("#category").val() == '';
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

JQUERY ATTEMPT #2:

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: {
                depends: function(element) {
                    return $("#category").val() == '';
                }
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

HTML:

<form name="uploadDocsForm" id="uploadDocsForm">   
    <label for="name">Document Name</label>
    <input name="name" id="name" type="text" class="textbox"/>
    <label for="cat_id">Category</label>
    <select name="cat_id" id="cat_id" class="dropdown">
    <option selected>Please Select Category</option>
    <option>------------------------</option>
    <option value="1">test cat</option>
    </select>
    <label for="category">New Category</label>
    <input name="category" id="category" type="text" class="textbox"/>
    </form>
0

2 Answers 2

19
$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: {
                depends: function(element) {
                    return $("#category").val() == '';
                }
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

The depends function now checks if the category element is filled, and if so the second is required. Otherwise it is optional (meaning can be filled).

Use Cases:

  • Category filled, cat_id empty : invalid
  • Category filled, cat_id filled : valid
  • Category empty, cat_id empty : valid
  • Category empty, cat_id filled : valid
4
  • It doesn't seem to be working properly. I tried this as well: cat_id: { required: { depends: function(element) { return ($("#category").val() != '' && $(element).val() != ''); } } }
    – Stephen S.
    Commented May 11, 2011 at 14:07
  • Your suggestion didn't trigger the existing errors (if name is empty) but when I added the "required" portion it still triggered the name errors but didn't write any message for the cat_id. It seemed to be "working" but the error message is suppressed.
    – Stephen S.
    Commented May 11, 2011 at 14:10
  • @Stephen I have corrected the code in accordance to the this source in the rules section. If it still does not work, set up a jsFiddle for us to use because this should work. In other words, your second attempt seems correct, if thats not working put up a jsFiddle.
    – Chad
    Commented May 11, 2011 at 15:16
  • 1
    I decided to do a bit more research and found the issue! all i had to do was add value="" to the empty options -- thanks for the help!
    – Stephen S.
    Commented May 11, 2011 at 18:43
2

I appears that 'depends' is not supported anymore.

I used the following and it works:

<form name="uploadDocsForm" id="uploadDocsForm">   
    <label for="name">Document Name</label>
    <input name="name" id="name" type="text" class="textbox"/>
    <label for="cat_id">Category</label>
    <select name="cat_id" id="cat_id" class="dropdown">
    <option value="" selected>Please Select Category</option>
    <option>------------------------</option>
    <option value="1">test cat</option>
    </select>
    <label for="category">New Category</label>
    <input name="category" id="category" type="text" class="textbox"/>
    </form>

Notice the option value="" which cause the validation to fail since val is empty

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: true
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});
1
  • Works for me, too. The depends and return values no longer needed as long as you have a blank option by default! Cheers, David. Commented Feb 28, 2013 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.