Валидация даты на JavaScript

Для ввода дат на сайтах я обычно использую замечательный плагин Jquery Datepicker, выставляя текстовому полю, к которому он привязан, режим readonly. Таким образом, я точно знаю, в каком формате введенная дата придет на сервер, и как ее там обработать (но не забываю о проверке введенных данных на стороне сервера!). Однако, недавно возникла задача разрешить ручной ввод даты в текстовом поле в формате дд.мм.гггг. Конечно, можно разрешить писать в текстовое поле все, что угодно и проверять валидность введенных данных на сервере. Однако, на мой взгляд, было бы удобней проверить данные сразу на стороне клиента, и если данные введены неверно — принять нужные меры.
Итак, вот как будет работать наша система: при клике на поле для ввода даты будет отображаться стандартный Jquery Datepicker. Если же пользователь хочет ввести дату вручную, он может написать ее прямо в этом текстовом поле. Для облегчения этого добавим к полю маску ввода Jquery Masked Input. Если введенная дата валидна, включаем кнопку сабмита и подсвечиваем поле зеленым. Если дата не валидна — подсвечиваем поле красным и отключаем кнопку сабмита.
Проверить валидность даты можно при помощи Jquery Validate, но я решил написать для этого свой велосипед на нативном JS, так что представленная ниже функция валидации может быть использована без каких-либо JS фреймворков (или в связке с любым из них :)).
Собственно, вот исходник моей функции:

function ValidateDate(date_fl){
str=date_fl.value;
function TstDate(){
str2=str.split(".");
if(str2.length!=3){return false;}
//Границы разрешенного периода. Нельзя ввести дату до 1990-го года и позднее 2020-го.
if((parseInt(str2[2], 10)< =1990)||(parseInt(str2[2], 10)>=2020)) {return false;}
str2=str2[2] +'-'+ str2[1]+'-'+ str2[0];
if(new Date(str2)=='Invalid Date'){return false;}
return str;
}
var S=TstDate()
if(S)
{
//Дата валидна
date_fl.className='date_ok';
document.getElementById("submit").disabled = false;
}
else
{
//Дата не валидна
date_fl.className='date_err';
document.getElementById("submit").disabled = true;
}
}

Немного поясню принцип ее работы: функция принимает на вход объект, в который производится ввод даты. Затем введенное значение разбивается на массив по точке в качестве разделителя и приводится в формат гггг-мм-дд, после чего происходит попытка создания на его основе объекта типа Date. Таким образом проверяется не просто соответствие записи форме xx.xx.xxxx, а именно возможность существования такой даты (31-е февраля не прокатит). Если все отлично — присваиваем полю ввода CSS-класс ‘date_ok’ и включаем кнопку сабмита. Если произошла ошибка — присваиваем класс ‘date_err’ и отключаем кнопку. Конечно, ничто не мешает вам произвести какие-то свои действия.
Ну и в конце архив с примером использования.

73 комментария

  1. Hi i am kavin, its my first occasion to commenting anywhere, when i read this poset i thought
    i could also make comment due to tjis brilliant post.

  2. Thanks a lot for sharing this with all folks you
    actually understand what you’re speaking approximately!
    Bookmarked. Kindly additionally visit my web site =).

    We could have a hyperlink exchange arrangement among us

  3. the following time i examine a weblog, with a bit of luck it does no longer fail me simply as plenty as this particular one. I imply, i understand it changed into my desire to read, but i really believed you would have something helpful to mention. All i listen is a bunch of crying about something that you may fix if you weren’t too busy looking for attention. When i to start with commented i seem to have clicked on the -notify me whilst new remarks are brought- checkbox and from now on each time a comment is added i recieve 4 emails with the exact identical remark. Is there a manner you are able to put off me from that carrier? An impressive percentage! I’ve simply forwarded this onto a colleague who has been accomplishing a little homework in this. And he without a doubt ordered me dinner absolutely due to the fact i found it for him… lol. So permit me to reword this…. Thanks for the meal!! But yeah, thanx for spending time to talk about this topic right here for your site.
    슬롯사이트

    >cc

  4. Косметология — увеличение губ
    Быстрый темп жизни, неправильное
    питание, загрязненная окружающая среда, неизменный
    стресс, вредные привычки
    – все эти перечисленные факторы неблагоприятно сказываются на внешнем виде каждого человека.
    Убрать эстетические дефекты, тем самым улучшив внешний зрелище кожи, можно в косметологии в Уфе.

    При обращении к косметологу важно, дабы у него было
    соответствующее медицинское образование.
    Только в таком случае он сможет не единственно ликвидировать внешние
    дефекты, да также отрыть внутреннюю причину, по которой
    возникла проблема.

    Процедура омоложения кожи и улучшения
    ее внешнего состояния — одна из самых популярных услуг, за которой обращаются в косметологии, отзывы о каких можно разобрать в интернете.
    Процесс омоложения осуществляется с
    использованием различных методик, которые подбираются
    в зависимости от индивидуальных показателей пациента.
    Достаточно распространен в косметологии — массаж лица.
    Его проводят с целью улучшения кровообращения, профилактики и лечения любых кожных патологий.

    Задать спрос
    Быстрый темп жизни, неправильное питание, загрязненная окружающая среда, неизменный стресс, вредные привычки – все
    эти перечисленные факторы неблагоприятно сказываются на внешнем виде каждого человека.
    Убрать эстетические дефекты, тем самым улучшив внешний картина
    кожи, можно в косметологии в Уфе.

    При обращении к косметологу важно, дабы у него было соответствующее медицинское
    образование. Только в таком случае он сможет не всего ликвидировать внешние дефекты,
    да также раскопать внутреннюю причину, по
    которой возникла проблема.

    Процедура омоложения кожи и улучшения ее внешнего состояния — одна из самых популярных услуг, за которой обращаются в косметологии, отзывы о каких можно
    прочитать в интернете. Процесс омоложения осуществляется с использованием различных методик, которые подбираются
    в зависимости от индивидуальных показателей пациента.
    Достаточно распространен в косметологии — массаж лица.
    Его проводят с целью улучшения кровообращения, профилактики и лечения любых кожных патологий.

  5. Does your website have a contact page? I’m having trouble locating it but, I’d like to send you an e-mail.
    I’ve got some suggestions for your blog you might be interested in hearing.
    Either way, great site and I look forward to seeing it expand over time.

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

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