jQuery Validate (validation) -- плагин для проверки (валидации полей) форм на строне клиента, описание, примеры

Данный плагин (с сайта jqueryvalidation.org) позволят делать валидацию (проверку) формы в соответствии со стандартами HTML5 (W3C) и/или по правилам заданным непосредственно вами в JS коде.

Например, обязательное текстовое поле в разметке должно выглядеть так (HTML5):

<form>
    <input type="text" required />
</form>

Как подключить

Из скаченного с оф. сайта архива подлючите до использования:

/dist/jquery.validate.js

или

/dist/jquery.validate.min.js

Вызов проверки перед отправкой формы с помощью Ajax

Пусть:

    var formSelector = "#clients-form";
    var $clientForm = $(formSelector);

Вы можете запустить проверку полей формы в нужный момент из JS на основании атрибутов HTML5 (предположим пока, что этого достаточно), просто вызвав:

if ($clientForm.valid()) { // вызываем валидацию формы
 // отправка данных или иные действия
 
}

При этом рядом с полями будет выведено сообщение о необходимости их заполнить (если они пусты).

Определение способа вывода сообщения

Бывает так, что вывод данного сообщения сломает имеющуюся у вас верстку, или приведёт к некорректной работе имеющегося JS (который был до добавления данного плагина). Без паники -- место и способ вывода сообщения можно переопределить, для этого ещё до вызова $clientForm.valid() добавьте код конфигурации с такими параметрами:

$clientForm.validate({
	// переопределим место вывода сообщения при неудачной валидации поля
	errorPlacement: function(error, element) { 

		element.parent().append(error); // добавим в родительский блок input-а
		//error.insertAfter(element);  // стандартное действие (просто добавляем после input-a)
}});

Материалы:

• Скачать плагин можно отсюда: https://jqueryvalidation.org/
• Настройки правил и другие опции validate(): https://jqueryvalidation.org/validate/