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

4 189 комментариев

  1. The subsequent step is figuring out precisely how substantially the bet
    pays out, which is where the numbers in the odds come into play.

  2. I’ve been exploring for a little for any high-quality articles or weblog
    posts on this sort of space . Exploring in Yahoo I eventually stumbled upon this web site.
    Studying this information So i’m glad to convey that I’ve a very good
    uncanny feeling I found out just what I needed.
    I so much no doubt will make sure to don?t forget this
    site and provides it a glance regularly.

  3. Today, I went to the beach with my kids. I found
    a sea shell and gave it to my 4 year old daughter and said «You can hear the ocean if you put this to your ear.» She put the
    shell to her ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is entirely off topic but
    I had to tell someone!

  4. Tremendous things here. I’m very happy to look your post.
    Thanks a lot and I’m having a look forward to touch you.
    Will you please drop me a mail?

  5. 22 Quick ammo was made by using black powder and for
    utilization in a small gun. It is presently utilized basically for short
    distance goal apply where overshooting is a
    fear, just as commotion limitations as a rifle shooting .22 Shorts, is exceptionally calm.
    The portions of the shot are not dreadfully not the identical as .22 LR
    on the muzzle, nonetheless, it’s out to any distance the place the numbers drop off very
    quick. 27-grain HP is a perfect varmint spherical
    pushing out of the muzzle at a decent 1,105 fps and estimating 73ft lbs.
    The usages of each bullet offered within the 22 Brief Ammo are equivalent to any of the other rimfire
    calibers on the market, yet you must hope somewhat extra, well, fewer outcomes.
    Regardless that initially made as a self-protection cartridge, it has been seized from that function several times over by far quite capable
    centerfire calibers which can be much better appropriate for such a role.

  6. I am extremely impressed together with your writing skills and also with the
    layout to your blog. Is that this a paid theme or did
    you customize it your self? Anyway keep up the excellent quality writing, it’s rare to see a great blog like this one these days..

  7. My spouse and I stumbled over here from a different web address and thought I might check things out.
    I like what I see so now i’m following you.
    Look forward to looking over your web page for a second time.

  8. I’ve been surfing online more than three hours today, yet I never found any
    interesting article like yours. It is pretty worth enough
    for me. Personally, if all webmasters and bloggers made good content as you
    did, the net will be a lot more useful than ever before.

  9. I was extremely pleased to discover this page. I wanted to
    thank you for ones time for this particularly wonderful read!!

    I definitely appreciated every bit of it and i also have you saved as a
    favorite to look at new stuff on your website.

  10. Oh my goodness! a tremendous article dude. Thank you Nevertheless I’m experiencing situation wuth ur
    rss . Don’t know why Unablee to subscribe to it. Is there anyone getting similar rss downside?
    Anybody who knows kindly respond. Thnkx

  11. Thanks for the concepts you are revealing on this site.
    Another thing I would really like to ssay is the fact that getting hold
    of of your credit rating in order to check accuracy of any detail could be the first motion yyou have to perform in redit
    improvement. Youu are looking to clean up your credit file from dangerous
    details errors that wreck your credit score.

  12. Woah! I’m really loving the template/theme of this
    site. It’s simple, yet effective. A lot of times it’s very hard to get
    that «perfect balance» between superb usability and
    visual appearance. I must say that you’ve done a fantastic job with this.

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

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