JQuery validate plugin(bassistance) dependency with selectbox

Question

I have a select box and an input text. The input text is hidden by default. If I select "Other" in select box, the input text will show.

Here I want to apply the dependency validation. If the the selected text is "Other", then the input text should be required. My code shown below:

$(document).ready(function () {
$("#customer-registration").validate({
    rules: {
        province: {
            required: true
        },
        otherState: {
            maxlength: 100,
            required: function (element) {
 return $('#province option:selected').text() == 'Other';
            }
        }
    },
    messages: {

        province: {
            required: "Please select Province"
        },
        otherState: {
            required: "Please enter other Province"
        }
    }
});
$("#submitFormBtn").click(function () {
    if ($("#customer-registration").valid()) {
        $("#customer-registration").submit();
    }
});

$("#province").change(function(){
 ($(this).val() == "Other")? $("#otherState").show() : $("#otherState").hide();
 });

});

When I select "Other", validation is happening properly. But when I select some other value in the selectbox, the error "Please enter other Province" still showing. Help me please...thanks in advance..

Answer 1

Hi you need to add something like this

otherState:{ 
    required:{                
        depends: function(element){
            return $('#province option:selected').text() == 'Other';
        }
    }
}