Jquery form validation

Jquery form validation

I have a form, whereby a dropdown has "Please choose state" which has a value of 0

I have wired up jquery form validation and when I press submit all fields are highlighted red which require a value. The problem I'm experiencing is how can I perform validation on that state dropdown when it already has a value of 0.

This is my HTML

  1. <select  id="UserDetails_SelectedState"  class="form-control" name="UserDetails.SelectedState" " >
    <option  value="0"  selected="selected" > Please Select State</option>
    </select>


To clarify if the value is 0 then it needs to display an error message saying please choose state

this is what I have:

  1. $('#myForm').validate({ // initialize the plugin
        rules: {
            "UserDetails.SelectedCountry": "required",
            "UserDetails.SelectedState": {
                required: function (element) {
                    var value = $("#UserDetails_SelectedState").val() == 0;
    
                    if (value) { // If the value is true I need to return false to make it required
                        alert("here");
                        return false;
                    } else { // Otherwise value is greater then 0 ok to carry on,
                        return true;
                    }
    
                }
            }
            "UserDetails.Postcode": "required"
        },
        messages: {
            "UserDetails.SelectedCountry": "Please choose your country",
            "UserDetails.SelectedState": "Please choose your state",
            "UserDetails.Postcode": "Please enter your postcode",
        }
    });
I see the alert message "here" and it returns false but it does not display the error message "Please choose your state"

Any suggestions?