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>
$("#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
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>.'
}
});
精彩评论