Skip to main content

JavaScript: validate date field in form


You may often require serialization of a form in JS and parsing of it's data. Here is a nice recipe to validate date with browser default methods. I like it because of relative simplicity.

It works on a principle of parsing date's components. We will create a JavaScript Date object from it and check if it is the same as a parsed date string. Date components that are wrong will go out of rage. SO we will have them different from the existing strings. This method is based on that hack.

I use this only to validate the string itself. I am specifying a placeholder of an input field to minimise user possibility to make a mistake. And I usually force user to enter date in my format with this tool. Anyway it's a good idea to put any datepicker component also.

function validate_date(value) {
    /**********************************************
    *    Validating date in format dd/mm/yyyy
    **********************************************/
    var comp = value.split('/');
    var d = parseInt(comp[0], 10);
    var m = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var date = new Date(y,m-1,d);
    return (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d);
}

So I use this with jQuery Plugins like:

  • jQuery.mask() plugin (To specify the exact format of user entered data. In case they are entered by hand. It's useful to just type '01022013' and do not type nasty slashes, entering something like '01/02/2013'.
  • Bootstrap.datepicker(). Because I use bootstrap often. Or there are plenty of native jQuery or jQuery UI plugins for date picking.

Hope this helps someone. Comments?

Comments

  1. You may take a look at input "date" in html5 specs too.

    ReplyDelete
    Replies
    1. Thanks I'm using it already. But I have to be sure user have not cheated. And I need my date entered in a certain format. Like: 31/12/9999

      Delete

Post a Comment

Popular posts from this blog

Pretty git Log

SO you dislike git log output in console like me and do not use it... Because it looks like so: How about this one? It's quite easy... Just type: git log - - graph - - pretty = format : '%Cred%h%Creset -%C ( yellow ) %d%Creset %s %Cgreen ( %cr) %C ( bold blue ) <%an>%Creset' - - abbrev - commit - - It may be hard to enter such an easy command every time. Let's make an alias instead... Copypaste this to your terminal: git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --" And use simple command to see this pretty log instead: git lg Now in case you want to see lines that changed use: git lg - p In order for this command to work remove  the -- from the end of the alias. May the code be with you! NOTE: this article is a rewritten copy of  http://coderwall.com/p/euwpig?i=3&p=1&t=git   and have b

Django: Resetting Passwords (with internal tools)

I have had a task recently. It was about adding a forms/mechanism for resetting a password in our Django based project. We have had our own registration system ongoing... It's a corporate sector project. So you can not go and register yourself. Admins (probably via LDAP sync) will register your email/login in system. So you have to go there and only set yourself a password. For security reasons you can not register. One word. First I've tried to find standart decision. From reviewed by me were: django-registration and django password-reset . These are nice tools to install and give it a go. But I've needed a more complex decision. And the idea was that own bicycle is always better. So I've thought of django admin and that it has all the things you need to do this yourself in no time. (Actually it's django.contrib.auth part of django, but used out of the box in Admin UI) You can find views you need for this in there. they are: password_reset password_reset_

Time Capsule for $25

The real article name might be something like:  Configuring Raspbery Pi to serve like a Time Capsule with Netatalk 3.0 for Mountain Lion.  But it's too long ;) Here I will describe the process of using Raspberry Pi like a Time Machine in my network. To be able to backup your MAC's remotely (Like it would be NAS of some kind). It assumes you have a Raspberry Pi and have installed a Raspbian there and have a ssh connection, or somehow having access to it's console. Refer to my previous article for details . Now that we have a Pi that is ready for action let's animate it. So to make it suit you as a Time Capsule (NAS) for your MAC's you need to do those basic steps: - connect and configure USB hard drive(s) - install support of HFS+ filesystem to be able to use MAC's native filesystem - make mount (auto-mount on boot) of your hard drive - install Avahi and Netatalk demons - configure Netatalk daemon to make it all serve as a Time Machine - configure