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

Если возникла необходимость сделать в extjs custom form validator, или проще говоря свой валидатор на форме, то вот один из вариантов решения.

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

custom form validator
Фирменное руководство 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  сбрасываем у обоих полей статус ошибки.

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

March 3, 2008 | Filed Under Uncategorized 

Comments

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

  1. Alexander Rudenko on April 18th, 2008 6:34 pm

    При вызове
    …
    validateValue: function (value) { return validateFromTo(value); }
    …
    ваша функция валидатор выполнится один лишний раз: собственно при создании формы.

    Попробуйте вместо этого свойство validate
    …
    validate: validateFromTo,
    …

Leave a Reply




FireStats icon Powered by FireStats