jquery - All error messages disappear when value is entered on one textbox

Question

I have following form with jquery validate.

1. When I submit the form without entering any values, it shows error messages. But when I enter value in “Amount” textbox, both the error messages are disappeared.

2. Also, after that, when I clear value in the Amount textbox, only the "Amount" error message is displayed until I click the button.

How to fix this?

Fiddle

jQuery Code

$("#formAddPayment").validate({
  rules: {
    "ddlModeOfPayment": {
      required: true
    },
    "txtAmount": {
      required: true
    }
  },
  messages: {
    "ddlModeOfPayment": {
      required: "Please select  Mode of Payment."
    },
    "txtAmount": {
      required: "Please enter Amount."
    }
  },

  showErrors: function (errorMap, errorList) {

    var errorListResult = $.map(errorList, function(error){
      return "<li>" + error.message+ "</li>";
    });

    $('#errorSummaryList').html(errorListResult.join(''))
    $('#errorSummaryList').fadeIn('fast');

    //Show error adjuscent to control also
    //this.defaultShowErrors();
  },
  submitHandler: function (form) {
    return false;
  }
});

Answer 1

All error messages disappear when value is entered on one textbox

From the documentation for showErrors:

The arguments contain only those elements currently validated, which can be a single element when doing validation onblur on focusout or keyup.

As you can see, the showErrors option is working as designed. The new map of messages does not retain the previous messages after new validation is completed. If one field is validated, then the map only contains the message for the one field, etc.

Just use wrapper and errorLabelContainer options, which, when used together, were designed to automatically keep an updated list of pending messages for the whole form...

wrapper: "li",  // <- the LABEL will be inside of this
errorLabelContainer: "#errorSummaryList",  // <- your UL element

DEMO: jsfiddle.net/y9o8du3q/