Праздничное настроение с HostCMS!
Создавайте сайты со скидкой до 20%

Выдано 112576 лицензий

Использование 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>

Не нашли ответ на свой вопрос в документации? Направьте обращение в или онлайн чат.