How do i create a form with input mask in javascript

Question

I want to create a html form with a text-field which checks if DD-MM-YYYY are correctly entered into the field and alerts the user if it's not the case. How can i approach this with javascript?

Do you want any sort of validation checking? Is year 9999 okay? How about day 45? — vol7ron
– vol7ron, Commented Sep 29, 2011 at 0:21
Added a little more lengthy solution. It's not the most optimized and not the most robust, but it'll get you started for both. — vol7ron
– vol7ron, Commented Sep 29, 2011 at 1:55
Use <input type="date"> in Webkit browsers. Also, pretty good plugin: masked input — Blazemonger
– Blazemonger, Commented Jul 3, 2014 at 15:26

user569322 · Accepted Answer · 2011-09-28 23:40:22Z

2

Couldn't you just make 3 <input> fields - one for month, day, and year?

answered Sep 28, 2011 at 23:40

user569322

Sign up to request clarification or add additional context in comments.

3 Comments

jan Over a year ago

i think that's possible as well, but how do i name the seperate input fields so it all can be stored in one field in my db?

user569322 Over a year ago

<input name="month" maxlength="2" /><input name="day" maxlength="2" /><input name="year" maxlength="4" />

user569322 Over a year ago

Then to store the info in PHP, just do soemthing like this: $text = $_POST['month'].$_POST['day'].$_POST['year']

Marshall · Accepted Answer · 2011-09-29 00:17:05Z

1

In JS, after the user key's off or hits enter, you could test the value (assuming the <input> has an id of inpdate for sake of example):

var val = document.getElementById('inpdate').value;
var check = /^\s*\d{2}-\d{2}-\d{4}\s*$/;
if(check.test(val)){
    // it's good
}
else {
    // not valid
}

I put \s* in to allow leading and trailing whitespace. Up to you if you would want to allow that.

answered Sep 29, 2011 at 0:17

Marshall

4,7961 gold badge21 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

JS Fiddle

Went a little overboard (and it's still not robust), but it allows you to change the format (MM-DD-YYYY) to something else like (YYYYMMDD).

HTML

<input type="text" name="date" id="date-input" onkeyup="checkDate.call(this)" />
<pre id="debug"></pre>

JS

var debug = document.getElementById('debug');

var checkDate = function(){
   var format = 'MM-DD-YYYY';
   var delim  = '-';
   var inputs = { object  : this
                , day     : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                , month   : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                , year    : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                };

   // Decipher Format Positioning
   var temp = ['Y','M','D'];
   var pos  = [];
   for (var i=0,n=temp.length; i<n; i++){
      pos[i]    = [];
      pos[i].push(format.indexOf(temp[i]));                // start
      pos[i].push(temp[i]);                                // letter
      pos[i].push(format.lastIndexOf(temp[i])-pos[i][0]);  // length
   }
   pos.sort();
   
   // Store the positions
   for (var i=0,n=pos.length; i<n; i++){
      switch (pos[i][1]){
         case 'D': inputs.day.order   =i; inputs.day.length   =pos[i][2]; break;
         case 'M': inputs.month.order =i; inputs.month.length =pos[i][2]; break;
         case 'Y': inputs.year.order  =i; inputs.year.length  =pos[i][2]; break;
      }
   }
    
   // Build Regex
   //alert(format);
   var temp = format.split(/[^a-zA-Z]/);
   var regex = '';    
   for(var i=0,n=temp.length; i<n; i++){
       regex += '(\\d{' + temp[i].length + '})';
   }
   var re = new RegExp(regex);
   var matches = re.exec(inputs.object.value.replace(/[^0-9]/g,''));  
   if (matches && matches.length>0){
      inputs.day.value   = matches[inputs.day.order   +1];
      inputs.month.value = matches[inputs.month.order +1];
      inputs.year.value  = matches[inputs.year.order  +1];
       
      debug.innerHTML = 'Valid Date: \n'
                      + '\tDay:   ' + inputs.day.value + '\n'
                      + '\tMonth: ' + inputs.month.value + '\n'
                      + '\tYear:  ' + inputs.year.value + '\n';
   } else {
      debug.innerHTML = 'Not a valid date!';
   }
    
};

Collectives™ on Stack Overflow

How do i create a form with input mask in javascript

3 Answers 3

3 Comments

Comments

JS Fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related