CODEWITHSUNDEEP
javascriptjqueryregex
bumbumpaw
bumbumpaw

Reputation: 2528

Validate date on keypress not working

This is the regex :

 pattern =/^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;

Hi guys, I found a simple regex for date format , no checking for leap year, but on my fiddle I can still input other invalid characters. Please see my FIDDLE.

Upvotes: 1

Views: 5839

Answers (1)

tbh__
tbh__

Reputation: 324

http://jsbin.com/ruhaxo/9/edit

Your code made me a little uncomfortable, so I tried to write this more simply so that it would be easier to read, you can pull out the part that you need, which I really think is just the event.preventDefault() when there is a match. Just to expand, as well: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes you are looking for char codes not the literal numbers.

    $('input').on('keypress', function (e) {
      var leng = $(this).val().length;

      if (window.event) {
        code = e.keyCode;
      }else {
        code = e.which;
      };

      var allowedCharacters = [49,50,51,52,53,54,55,56,57,48,45];
      var isValidInput = false;

      for (var i = allowedCharacters.length - 1; i >= 0; i--) {
        if(allowedCharacters[i] == code){
          isValidInput = true;
        } 
      };

      if(isValidInput === false || /* Can only input 1,2,3,4,5,6,7,8,9 or - */
       (code == 45 && (leng < 2 || leng > 5 || leng == 3 || leng == 4)) ||
       ((leng == 2 || leng == 5) && code !== 45) || /* only can hit a - for 3rd pos. */
        leng == 10 ) /* only want 10 characters "12-45-7890" */
      {

        event.preventDefault();
        return;
      }

    });

You can also do this with an object, rather than an Array. Which is a little easier to read:

    $('input').on('keypress', function (e) {
      var leng = $(this).val().length;

      if (window.event) {
        code = e.keyCode;
      }else {
        code = e.which;
      };

      var allowedCharacters = {49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,48:0,45:'-'}; /* KeyCodes for 1,2,3,4,5,6,7,8,9,- */

      if(typeof allowedCharacters[code] === 'undefined'|| /* Can only input 1,2,3,4,5,6,7,8,9 or - */
         (code == 45 && (leng < 2 || leng > 5 || leng == 3 || leng == 4)) ||
         ((leng == 2 || leng == 5) && code !== 45) || /* only can hit a - for 3rd pos. */
          leng == 10 ) /* only want 10 characters "12-45-7890" */
      {

        event.preventDefault();
        return;
      }

    });

EDITED:

Please be careful with this, I haven't fully tested this, but I edited the regex from the post mentioned, if you have this in addition to one of the other choices above, (this happens on keyup after the other checks have been made) this would validate the date in the format mm-dd-yyyy please check that it works properly, I tried 02-29-2008, the first leap year I could think of, and it worked, but I would recommend testing it more since it has been modified.

$('input').on('keyup',function(e){

  /* From:
  http://stackoverflow.com/questions/17503043/javascript-regular-expression-to-validate-date-in-mm-dd-yyyy-format
  and
  http://jsfiddle.net/LSsMc/
  */

  var thisVal = $(this).val();
  var leng = thisVal.length;

  var reg = new RegExp(/^(((0[13578]|1[02])\-(0[1-9]|[12]\d|3[01])\-((19|[2-9]\d)\d{2}))|((0[13456789]|1[012])\-(0[1-9]|[12]\d|30)\-((19|[2-9]\d)\d{2}))|(02\-(0[1-9]|1\d|2[0-8])\-((19|[2-9]\d)\d{2}))|(02\-29\-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g);
  if(leng == 10){
    if(reg.test(thisVal)){
      console.log('Valid Date');
    }else {
      event.preventDefault();
      return;
    } 
  }
});

Upvotes: 3

Related Questions