JNPW JNPW - 4 months ago 101
Ajax Question

jquery validate rules with multiple if/else condition

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 format for 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 the cases the 1st condition for required field works. However for refNum field the 2nd condition which has refNumChk isnot 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

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) || /^[a-z]{2}-\d{3}$/.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
      },
      refTranDate: {
        required: true,
        lessThanToday: true
      }
    },
    messages: {
      refTranNbr: {
        required: "Please enter the reference transaction number",
        refNumChk: "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>
<form id="adjustmentsFormID" method="post" action="">
  <div>
    <input name="refTranNbr" />
  </div>
  <div>
    <input name="refTranDate" />
  </div>

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