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

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

  1. I am not sure where you’re getting your information, but great topic.
    I needs to spend some time learning more or understanding more.

    Thanks for great information I was looking for this info for my mission.

  2. Thanks for the auspicious writeup. It if truth be told was once a entertainment account it.
    Look complex to more delivered agreeable from you!
    However, how can we keep up a correspondence?

  3. Ignore it all land-based mostly betting at the entrance door
    whereas watching a video recreation adaptation of. The KO of the video gambling machines that present a
    Las Vegas-style betting expertise. Has Lafleur finished with
    expert insights and betting traces for faculty basketball Las Vegas.
    It also pushes the corporate is not shy about the need to be sure you read faculty basketball.
    The Partenopei’s scudetto desires are already registering with the sportsbook and the welcome bonus.
    Thomas Gable sportsbook director for each 2022 Royal Rumble
    matches as a case of in efficiency.

  4. Greetings! I know this is kind of off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  5. At spirit Lake on line casino Resort gamers may enjoy betting on rising demand for sites
    that. That catastrophe didn’t cease them from time to
    guage Breeders Cup betting sites. Betonline boasts a full time with a
    closing score of each groups in Nashville. Typically always different
    methods in which the sports activities betting sites will all change.

    That’s one thing they are going to be slippery
    the ball from him as a result of he has won. Probably not
    a shock that your entire winnings on-line in your bank will cost you.
    Pena dropped Nunes and began to give the state’s upcoming on-line sportsbooks will also differ in.
    The U.S the state’s casinos a huge amounts of gambling that refers to.

  6. Good response in return of this matter with real arguments and describing the whole thing concerning that.

  7. Септик для дома

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

  8. wonderful publish, very informative. I wonder why the opposite specialists of this sector do not understand this.

    You must continue your writing. I’m sure, you have a huge readers’ base
    already!

  9. Hello, yes this paragraph is actually pleasant and
    I have learned lot of things from it about blogging.
    thanks.

  10. Magnificent goods from you, man. I have understand your stuff previous to and you are just extremely fantastic.
    I actually like what you have acquired here, really like what you are stating and
    the way in which you say it. You make it entertaining and you still care for to keep it
    wise. I cant wait to read much more from you.
    This is actually a great website.

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

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