0

Mootools валидация формы на стороне клиента

Столкнулся с тем, что нужно написать проверку значений введённых данных на стороне клиента, используя Mootools. Библиотека Mootools в последнее время сильно разрослась, и из маленькой уютной библиотеки постепенно становится монстром типа jquery.

Короче, говоря. Начал я изучать вопрос про Form.Validator и как оказалось про механизм локализации Mootools.Lang, так как они тесно связаны. Результат вылился в простой опус.

Создадим простую контактную форму, с 2 обязательными полями. К этим полям применяются некоторые дополнительные требования. К имени: вводимая строка должна быть не меньше 3 символов и не больше 10.  А почтовый ящик должен быть похож на почтовый ящик.

Механизм устроен следующим образом. В библиотеке есть 2 основных класса отвечающие за валидацию: FormValidator и InputValidator. Из-за этих названий можно запутаться, на самом деле. Кто и за что отвечает? Так вот InputValidator отвечает за тесты проводимые с одни элементом Input. А FormValidator отвечает за применение этих тестов к Input’ам в форме. В библиотеке Mootools существует набор предопределённых InputValidator’ов, каждый из которых делает определённую проверку:

  • required — проверяет пустое поле или нет;
  • minLength — минимальную длину;
  • maxLength — максимальную длину;

И так далее. Подробнее на сайте mootools.

Нам понадобятся: required, minLength, maxLength и validate.email.

Чтобы объяснить FormValidator’у какой InputValidator и в каком случае использовать, в Mootools используется 2 способа. Первый, это передать название и параметры InputValidator’у через атрибут class. Например,

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

И второй способ — это отдать JSON объект через дополнительный аттрибут:

<input class="minLength maxLength" validatorProps="{minLength: 10, maxLength:20}" />

Но это не валидный XHTML и его не рекомендует сам Mootools. Ну и хорошо, будем использовать первый вариант. Создадим форму и добавим в неё 2 наших Input’а с необходимыми именами классов:

<input id="name" class="required minLength:5 maxLength:10" name="name" type="text" />
<input id="mail" class="required validate-email" name="mail" type="text" />

Ну а теперь код, который я так долго вымучивал, без нормальный примеров и помощи. Сначала нам нужно создать FormValidator и отдать ему объект нашей формы:

	var myFormValidator = new FormValidator($('contact'), {

в параметрах укажем ему, что делать в тот момент, когда форма уже обработана и есть результат работы:

	onFormValidate: function(ok) {

а так же в момент, когда FormValidator обнаружил не валидный элемент:

	onElementFail: function(el, validator) {

ну и заодно когда обнаружил валидный элемент:

	onElementPass: function(el) {

Я не буду вдаваться в подробности, что конкретно нужно делать в таких случаях, здесь всё зависит от фантазии. Главное и самое интересное, все InputValidator’ы входящие в Mootools, имеют нам что сказать. То есть в случае невалидного элемента InputValidator имеет сообщение. Для меня самое сложное было это заполучить это сообщение об ошибке:

	onElementFail: function(el, validator) {
		$('error_wrapper2').setStyle('display','block');
		errs.set(el.get('id'), this.getValidator(validator[0]).getError(el));

		updateErrs();
	}

Ну и когда всё готово, мы знаем, что все сообщения в Mootools переведены на разные языки. Теперь, чтобы Mootools заговорил по русски, достаточно одной команды:

	MooTools.lang.setLanguage('ru-RU-unicode');

Вот и всё. Ссылка на работающий пример: /blog/demos/mootools/form-validation-utf8.php

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *