Валидация даты на 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’ и отключаем кнопку. Конечно, ничто не мешает вам произвести какие-то свои действия.
Ну и в конце архив с примером использования.

118 комментариев

  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.

  6. Цены на услуги и консультации психолога.
    Консультация по Skype Помощь профессионального Психолога.
    Онлайн-консультация у психолога.
    Онлайн-консультация у психолога.
    Індивідуальні консультації.
    Консультация Психолога — Профессиональная поддержка.
    Профессиональные психологи.

  7. Great blog here! Also your site loads up very fast! What web host are
    you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as
    yours lol

  8. I was wondering if you ever considered changing the page lahout of your blog?
    Its very well written; I love what youve got to say. But maybe you
    could a little more in the way of congent so
    people could connect with it better. Youve got ann awful lot of text for only having one or 2 pictures.
    Mabe you could space it out better?

  9. Thanks for ones marvelous posting! I actually enjoyed reading it, you’re a great author.I will
    be sure to bookmark your blog and definitely will
    come back from now on. I want to encourage yourself
    to continue your great writing, have a nice weekend!

  10. Hello there! This blog post couldn’t be written much better!

    Going through this article reminds me of my previous roommate!
    He continually kept preaching about this. I am going to forward this article to him.

    Fairly certain he will have a very good read.
    Thank you for sharing!

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

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