Question

    $('form').on('submit', function(e) {
    e.preventDefault();
    if(!$(this).valid()) {
        $(this).find(".dialogErrorMessageArea").show();
    } else {
        $(this).submit();
    }
});

I am trying to bring my custom error message area visible if form is not valid.
However, the else branch now goes back to this handler and never submits. How to submit form in else branch? Or this approach wrong and how to do this correctly?

Answer 1

try this:

$('form').on('submit', function(e) {
  if(!$(this).valid()) {
    $(this).find(".dialogErrorMessageArea").show();
    e.preventDefault();
  }
});

or a bit more simpler:

$('form').submit(function(e) {
  if(!$(this).valid()) {
    $(this).find(".dialogErrorMessageArea").show();
    e.preventDefault();
  }
});