Рабочая валидация с проверкой captcha
<script>
$(function() {
$(".validate").validate({
focusInvalid: true,
errorClass: "input_error",
onkeyup: false,
onfocusout: false,
rules: {
captcha: {
required: true,
remote: '/forms/'
},
author: "required",
text: "required",
email: {
required: true,
email: true
}
},
messages: {
author: "Пожалуйста, укажите своё Имя!",
text: "Пожалуйста, напишите свой комментарий!",
captcha: "Вы не вписали контрольное число!",
email: {
required: "Введите свой email",
email: "E-mail должен быть в формате name@domain.com"
}
}});
});
</script>Проверьте, подключен ли в макете файл 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>Проверка скриптом
<script >
$.validator.addClassRules("name", {
required: true,
minlength: 2
});
</script >или сразу для нескольких полей:
<script >
$.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}});
</script >Передача опций при инициализации validate()
Методу validate() передаем объекты rules и messages которые состоят из пар ключ/значение. В rules в качестве ключа указываем атрибут name поля, значением указываем правило проверки. В messages в качестве ключа так же идет атрибут name поля, а в качестве значения указываем предупреждающее сообщение.
<script >
$(".validate").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "Введите свой email",
email: "E-mail должен быть в формате name@domain.com"
}
}});
</script >Список правил:
-
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 >
$(".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"
});
</script><SCRIPT>
$(document).ready(function() {
$('.select2').addClass('required');
$("#form<xsl:value-of select="@id" />").submit(function (event) {
event.preventDefault();
var eml = $('input[name=email]').val();
if(eml =='svinya.svintus@yandex.ru') {
alert ('Вы не можете отправлять нам письма');
$(location).attr('href', '/');
}else{
$(this).validate({
focusInvalid: true,
errorClass: "input_error"
});
}
});
});
</SCRIPT>