CODEWITHSUNDEEP
jqueryjquery-validate
Stephen S.
Stephen S.

Reputation: 835

Jquery Validate dropdown required if field empty

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>

Upvotes: 14

Views: 54304

Answers (2)

Ravi Ram
Ravi Ram

Reputation: 24488

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>.'
    }
});

Upvotes: 2

Chad
Chad

Reputation: 19609

$("#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

Upvotes: 19

Related Questions