Я использую проверку jquery, я должен реализовать функциональность, чтобы в случае сбоя какого-либо правила форма не отправлялась. Работа выполнена, валидация работает нормально.

Проблема заключается в том, что если несколько правил не удалось, он показывает сообщения об ошибках в каждом текстовом поле, ошибка распространяется на все правила.

Я хочу добиться функциональности, при которой в случае сбоя одного правила оно должно останавливаться на сообщении об ошибке только этого элемента.

<form id="myform">
 <label for="firstName">FirstName</label>
 <input class="left" id="fname" name="fname" />
 <br>
 <label for="lastName">LastName</label>
 <input class="left" id="lname" name="lname" />
 <br>
 <label for="fromDate">fromDate</label>
 <input class="left" id="fromDate" name="fromDate" />
 <br>
 <label for="endDate">endDate</label>
 <input class="left" id="endDate" name="endDate" />
 <br>
 <input type="submit" value="Validate!">
 </form>

Правила:

$( "#myform" ).validate({
  rules: {
    fname:"required",
    lname:"required",
    fromDate:"required",
    endDate:"required"
  }
});

Это демонстрация моей проблемы. Сообщение «Это поле обязательно для заполнения» должно появиться один раз, то есть для первого текстового поля. Ошибка не должна распространяться на оставшиеся текстовые поля.

Пожалуйста, ответьте, если кто-то понимает, что я хочу. (Это мой демонстрационный код).