jquery validate rules with multiple if/else condition

Question

I want to use jQuery validate() rule to 2 cross fields. If either of the field is typed in the other one is also required. Also, once they are required there a format for the number field should be 1st 15 digits should be integer and date field should be mm/dd/yyyy format and date should be less than todays date.

//..

    $("#adjustmentsFormID").validate({
      rules: {            
        refTranNbr: "required",
        refTranDate: "required"
      },
        messages: {         
            refTranNbr: {
                required: function (element) {
                    if ($("#refTranDate").val().length > 0) {
                        return "Please enter the reference transaction number ";
                    } else if (!refNumChk($("#refTranNbr").val())) {
                         return "Please enter a valid Reference Transaction Number";                    
                    } else {
                        return false;
                    }
                }
            },          
            refTranDate: {
                required : function (element) {
                    var tdate = $("#refTranDate").val();
                    if ($("#refTranNbr").val().length > 0) {                      
                        return "Please enter a date for the Refering Transaction to complete this transaction.";
                    } else if ((new Date() > new Date(tdate))) {
                        return "Please enter a reference transaction date less than today's date.";
                    } else {
                        return false;
                    }

                }
        }, 
    }); 


..//

In both cases the 1st condition for required field works. However, for refNum field the 2nd condition which has refNumChk is not working. Actually its not getting called. Similarly for refTranDate required field validation works however date > tDate is not getting checked. Not sure if this method would work or should I do something different for multiple conditions.

Answer 1

Your approach to jQuery validation is wrong, the messages is used to return only the error message in case of an validation error.

So the only validation you are doing is the required validation, you can add custom validation rules to solve this

jQuery(function($) {
  jQuery.validator.addMethod("refNumChk", function(value, element, params) {
    return this.optional(element) || /^\d{15}[A-Z]$/.test(value);
  }, jQuery.validator.format("Enter a value in forat aa-999"));
  jQuery.validator.addMethod("lessThanToday", function(value, element, params) {
    return this.optional(element) || new Date() > new Date(value);
  }, jQuery.validator.format("Value should be less than today"));


  $("#adjustmentsFormID").validate({
    rules: {
      refTranNbr: {
        required: true,
        //refNumChk: true
        pattern: /^\d{15}[A-Z]$/
      },
      refTranDate: {
        required: true,
        lessThanToday: true
      }
    },
    messages: {
      refTranNbr: {
        required: "Please enter the reference transaction number",
        pattern: "Please enter a valid Reference Transaction Number"

      },
      refTranDate: {
        required: "Please enter a date for the Refering Transaction to complete this transaction.",
        lessThanToday: "Please enter a reference transaction date less than today's date."
      },
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="adjustmentsFormID" method="post" action="">
  <div>
    <input name="refTranNbr" />
  </div>
  <div>
    <input name="refTranDate" />
  </div>

  <input type="submit" value="Save" />
</form>