Использование jQuery Validate для проверки форм

Проверьте, подключен ли в макете файл jquery.validate.min.js, в системе управления он расположен в hostcmsfiles/jquery/jquery.validate.min.js

Core_Page::instance() 
	// jQuery 
	->js('/hostcmsfiles/jquery/jquery.min.js') 
	... 
	// Validate 
	->js('/hostcmsfiles/jquery/jquery.validate.min.js') 
	... 
	->showJs();

Указание валидации формы

Валидация конкретной формы или форм с классом validate указывается следующим образом:

<script>
$(".validate").validate();
</script>

Валидация всех форм:

<script>
$("form").validate();
</script>

Способы валидации форм

Использование имена классов как правила

Тем полям, которые нужно провалидировать, добавляете атрибут class="required"

<form action="." method="post" class="validate">
  <input type="text" name="name" value="" class="required" />
  <input type="submit" value="Submit" />
</form>

С помощью метода addClassRules вы можете расширить и добавить условие валидации:

<form action="." method="post" class="validate">
  <input type="text" name="name" value="" class="name" />
  <input type="text" name="zip" value="" class="zip" />
  <input type="submit" value="Submit" />
</form>

$.validator.addClassRules("name", {
	required: true,
	minlength: 2
});

или сразу для нескольких полей:

$.validator.addClassRules({
	name: {
		required: true,
		minlength: 2
	},
	zip: {
		required: true,
		digits: true,
		minlength: 5,
		maxlength: 5
	}
});

Передача опций при инициализации validate()

Методу validate() передаем объекты rules и messages которые состоят из пар ключ/значение. В rules в качестве ключа указываем атрибут name поля, значением указываем правило проверки. В messages в качестве ключа так же идет атрибут name поля, а в качестве значения указываем предупреждающее сообщение.

$(".validate").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

Список правил:

• required — поле обязательное для заполнения (true или false);
• remote — указывается файл для проверки поля (например: "check.php");
• email — проверяет корректность e-mail адреса (true или false);
• url — проверяет корректность url адреса (true или false);
• date — проверка корректности даты (true или false);
• dateISO — проверка корректности даты ISO (true или false);
• number — проверка на число (true или false);
• digits — только цифры (true или false);
• creditcard — корректность номера кредитной карты (true или false);
• equalTo — равное чему-то (например другому полю equalTo: "#pswd");
• accept — проверка на правильное расширение (accept: "xls|csv");
• maxlength — максимальное кол-во символов;
• minlength — минимальное кол-во символов;
• rangelength — кол-во символов от скольких и до скольких (rangelength: [2, 5]);
• range — число должно быть в диапазоне от и до (range: [2, 12]);
• max — максимальное значение числа;
• min — минимальное значение числа.

Пример использования в XSL-шаблоне

Указываем форме класс например validate, и далее в XSL-шаблоне формы добавляем код проверки формы (пример взят из формы быстрого заказа в адаптивном шаблоне):

<script language="JavaScript">
	<xsl:comment>
		<xsl:text disable-output-escaping="yes">
			<![CDATA[

			$(".validate").validate({
				rules: {
					surname: "required",
					name: "required",
					email: {
						required: true,
						email: true
					}
				},
				messages: {
					surname: "Введите фамилию!",
					name: "Введите имя!",
					email: {
						required: "Введите e-mail!",
						email: "Адрес должен быть вида name@domain.com"
					}
				},
				focusInvalid: true,
				errorClass: "input_error"
				});
			]]>
		</xsl:text>
	</xsl:comment>
</script>