Вы здесь

extjs form custom validator или как сделать сложный валидатор сразу на два поля

Если возникла необходимость сделать в extjs custom form validator, или проще говоря свой валидатор на форме, то вот один из вариантов решения.Рассмотрим задачу. Есть поисковая форма на extjs. В этой форме есть два поля с датой, которые задают интервал поиска. Нужно произвести проверку на длинну интервала, и если временной интервал превышает 31 день, то выдать сообщение об ошибке.

Фирменное руководство extjs по этому поводу не дает никаких примеров. А те примеры, что есть в сети предлагают решение на основе всплывающего окна с сообщением об ошибке. Я же предлагаю решение, работающее так же как и родные валидаторы.

Создадим наши поля на форме, заполним их значениями по-умолчанию и навесим фунецию проверки значений на правильность:

var today = new Date();
today = today.format('d/m/Y');
var fromday = new Date().add(Date.DAY, -6);
fromday = fromday.format('d/m/Y');
fromDate =   new Ext.form.DateField({
id:'from',
fieldLabel: 'From',
name: 'from',
width:170,
allowBlank:false ,
format:'d/m/Y' ,
value: fromday,
validateValue: function (value) { return validateFromTo(value); }
});
toDate =   new Ext.form.DateField({
id:'to',
fieldLabel: 'To',
name: 'to',
width:170,
allowBlank:false,
format:'d/m/Y',
value: today,
validateValue: function (value) { return validateFromTo(value); }
});

А вот и собственно функция проверки:

function validateFromTo(value)
{
var v_from = fromDate.getValue();
var v_to = toDate.getValue();
if ((((parseInt(v_to.format('U'))-parseInt(v_from.format('U'))))/3600/24) > 31)
{
searchForm.getForm().markInvalid({'from':'The time period for a search cannot exceed 31 days. Please adjust dates to cover a 1 month time period'});
searchForm.getForm().markInvalid({'to':'The time period for a search cannot exceed 31 days. Please adjust dates to cover a 1 month time period'});
return false;
};
fromDate.clearInvalid();
toDate.clearInvalid();
return true;
}

На ней остановлюсь подробнее. Сначала мы вычисляем временной интервал между начальной и конечной датами. getValue возвращает обьект типа date. а его метод format форматирует дату так как нам нужно. Мы ее переведем в секунды. Потом отнимем от конечной даты начальную и проверим, чтоюы этот интервал был не более 31 дня.

Если интервал больше 31 дня, то при помощи метода markInvalid мы помечаем оба поля нашим сообщением об ошибке, а если меньше, то при помощи clearInvalid  сбрасываем у обоих полей статус ошибки.

В результате имеем форму, на которой валидатор обрабатывает сразу два поля.

Примечание:

При вызове


validateValue: function (value) { return validateFromTo(value); }

ваша функция валидатор выполнится один лишний раз: собственно при создании формы.

Попробуйте вместо этого свойство validate


validate: validateFromTo,

Комментарии

спасибо, очень помогло!