required dependency expression

http://stackoverflow.com/questions/19811217/jquery-validation-plugin-using-conditons

by ryleyb

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="createProfileForm">
<div>
    Is this a social sign up? Change between the words true and false to get different results <input type="input" id="isSocialSignup" name="isSocialSignup" value="true" />
    </div>
    <div>
    <input type="text" name="firstName" value="John" /><br>
    <input type="text" name="firstName" value="Smith" />   <br> 
    Password: <input type="password" name="password" value="" /><br>
        Gender: <input type="text" id="gender" name="gender" value="Male"/>
  </div>    <input type="submit">
    <div id="errors"></div>
</form>

CSS

.error {
    color: red;
}

JavaScript

$("#createProfileForm").validate({
    ignore: [], //use for hidden fields validation, by default hidden fields are ignored
    rules : {
        "firstName" : {
            required : true,
        },
        "lastName" : {
            required : true,
        },
        "gender" : {
            required : true,
        },
        "password" : {
            required : function(element) {
                return $("#isSocialSignup").val() == "true"                    
            },
            minlength : 6
        }
    },
        messages : {
            "firstName" : {
                required : 'First Name is required',
            },
            "lastName" : {
                required: "Last Name is required",
            },
            "gender" : {
                required : "Gender is required",
            },
            "password" : {
                required : "Password is required",
                minLength : "Lenght should be atleast 6 characters"
            }
        },
        errorPlacement: function(error, element) { //custom location for error placement
            if (element.attr("name") == "gender") {
              error.insertAfter(".temp");
            } else {
              error.insertAfter(element);
            }
          } ,
    submitHandler:function(){
       alert('successful submit');
        return false;
    }
});