Limit numbers entered in input field

Question

I got this working however, it need to limit the parts of the text input. For instance, I have to limit DD to allow upto 31, MM to limit upto 12 and limit YYYY from 1900 to 2018

Any idea how to go about this?

 $('[data-type="dateofbirth"]').mask('00/00/0000'); function submitBday1() { var Q4A = ""; var Bdate = document.getElementById('bday1').value; var darr = Bdate.split('/'); var temp = darr[0]; darr[0] = darr[1]; darr[1] = temp; var fmtstr = darr.join('/'); var Bday = +new Date(fmtstr); Q4A += ~~((Date.now() - Bday) / (31557600000)); var theBday = document.getElementById('resultBday1'); theBday.innerHTML = Q4A; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script> <input type="text" pattern="[0-9]*" data-type="dateofbirth" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY"> 

Answer 1

The jquery.mask.min.js library

is not meant to be a validation library, just a way to automatically insert characters like punctuation. Validation would have to be done separately.

Hence, I would suggest to use Inputmask :

 $('[data-type="dateofbirth"]').inputmask({alias: 'datetime', inputFormat: 'dd/mm/yyyy'}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> <input type="text" data-type="dateofbirth" maxLength="10" class="form-control" placeholder="dd/mm/yyyy"> 

Answer 2

You have a couple of options:

1. Use <select> :

 <select> <option>1</option> <option>2</option> <option>...</option> <option>31</option> </select> 

2. Use <input type="number" min="1" max="31"> :

 <label>Day <input type="number" min="1" max="31" step="1" value="1" /> </label> <label>Month <input type="number" min="1" max="12" step="1" value="1" /> </label> <label>Year <input type="number" min="1900" max="2018" step="1" value="2018" /> </label> 

Note: not all browsers support number as an input type, so please make sure it'll work on the platforms that you need it to work on.

Answer 3

You want to validate your inputs beyond what hmlt5 can do, so a plugin like jQuery Validate would be a good idea.

You may have to research basic usage first, but it is fairly straightforward and very useful.

First, to validate your birth date, moment.js will make it easy:

moment(document.getElementById('bday1').value, 'DDMMYYY').isValid() moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= 2018 or better moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= moment().year()

To tie this into jQuery validate, you can add the below as a custom method of jQuery Validate and set a rule for your "date" input validBirthDate : true

$.validator.addMethod('validBirthDate', function(value){
    return moment(value, 'DDMMYYY').isValid() && moment(value, 'DDMMYYY').year() <= moment().year();
})

Answer 4

Try this...

$('[data-type="dateofbirth"]').mask({
   alias: 'datetime',
   inputFormat: 'dd/mm/yyyy',
   min: '31/12/1900',
   max: '31/12/2018'
});