How to allow only digits from 0 to 30 or character A, D when inputting using javascript?

Question

Hi, I created a javascript function to allow numbers from 0 to 30 and the characters A and D. I give a warning if it does not meet the criteria, but if the user clicks ok on the warning, the values ​​still remain in the input and can be updated in the database data. I want this user to not be able to enter anything into the input field, except for the characters A, D and numbers from 0 to 30, as is the case with type = number, we can only enter numbers. My javascript function: -

function validate() { var regex = /[ad0-9]/gi; var txt = document.getElementById('txt').value; var valid = true; var error = ''; if (regex.test(txt)) { if (!isNaN(txt)) { if (!(parseInt(txt) >= 0 && parseInt(txt) <= 30)) { valid = false; error = 'Please enter between 0 to 30.' } } } else { valid = false; error = 'Please enter between 0 to 30, A or D' } if (!valid) { alert(error); } } 

javascript works fine with validation, but after clicking ok, the warning value still remains, and it also gives an error when the input field is empty to avoid this. Is there any other better way to create a function or can it be done using jquery. I'm new to jquery, if it's possible to do with jquery, that would be great. I would be very grateful if anyone could help.

Answer 1

You can try this sample code.

 function validate(box) { var val = box.value; if (!/^[AD]?$/.test(val) && isNaN(val) || (0 > val || 30 < val)) { box.value = ''; alert('Only A or D or 0-30'); } } 

 <input type='text' value='30' onblur='validate(this);' /> 

Answer 2

 if(txt.replace(/ /g, '').length == 0) { // text is empty return; // get out of function } 

If you want to make sure that there is no mistake with empty text, you can do this. The .replace part should ensure that if text input is filled only with spaces, it is considered empty.

The rest of the function:

 function validate() { var regex = /[ad0-9]/gi; var txt = document.getElementById('txt').value; var valid = true; var error = ''; if(txt.replace(/ /g, '').length == 0) { // text is empty return; // get out of function } if (regex.test(txt)) { if (!isNaN(txt)) { if (!(parseInt(txt) >= 0 && parseInt(txt) <= 30)) { valid = false; error = 'Please enter between 0 to 30.' } } } else { valid = false; error = 'Please enter between 0 to 30, A or D' } if (!valid) { alert(error); } } 

Answer 3

The best solution would be to test it the moment you insert it into the database.

Answer 4

How about replacing the forbidden values, so only the desired input is allowed. With this, you cannot enter anything but A, D and the numbers 0 - 30:

 $('input').on('input', function(e) { this.value = this.value .replace(/[^AD\d]/, '') .replace(/(3)[1-9]/, '$1') .replace(/(30)[0-9]/, '$1') .replace(/([4-9])[0-9]/, '$1') .replace(/([\d][\d])[\d]/, '$1'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="text" /> 

Note that it is still recommended that you do some server-side validation.