CODEWITHSUNDEEP
javascriptregexvalidationinput
Kees
Kees

Reputation: 187

JS validation allow letters and specific symbol only + change input

I am using a JS solution to allow letters and backspace only. I want to add more options to the input, but can't see to find the right solution.

My Code:

<input id="inputTextBox">

  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) { 
            event.preventDefault(); 
        }
        console.log(inputValue);
    });
});

This give me the correct result of only letter input and use of backspace. For the correct user experiece I need to add the following.

Allow input '?' , '*' and 'spacebar'.

And if possible, change the input in the form when the user typ. So if a user typ a '?' or 'spacebar', it changes into the value '*' automatic.

Thanks in advance.

Upvotes: 1

Views: 892

Answers (3)

user120242
user120242

Reputation: 15268

Slightly modified from this solution:
How to allow only numeric (0-9) in HTML inputbox using jQuery?

EDIT: added code to preserve position when ? and spaces are replaced

// Restricts input for the set of matched elements to the given inputFilter function.
// Modified to pass element to callback function
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

$(document).ready(function(event) {
  $("#inputTextBox").inputFilter(function(el) {
    var oldSelectionStart = el.selectionStart;
    var oldSelectionEnd = el.selectionEnd;
    var oldValue = el.value;
    el.value = el.value.replace(/[* ]/g, '?'); //replace * space with ?
    el.value = el.value.replace(/[^a-zA-Z?]/g, '');
    if (oldValue != el.value)
      el.setSelectionRange(oldSelectionStart-(oldValue.length-el.value.length), oldSelectionEnd-(oldValue.length-el.value.length));
    return /^[a-zA-Z?]+?$/.test(el.value); // alphabet question only
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">

Upvotes: 1

Arun Raj
Arun Raj

Reputation: 263

Simply added a keyup function to replace the character '?' and space to * and also added envent ids of space and '?' in your keypress function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">
<script>
  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0 && inputValue != 63 && inputValue != 42 && inputValue != 32)) { 
            event.preventDefault(); 
        }
    });
     $("#inputTextBox").keyup(function(){
        var inputTxt =  $('#inputTextBox').val();
        inputTxt = inputTxt.replace('?', '*').replace(' ', '*')
          $('#inputTextBox').val(inputTxt); 
     });
});
</script>

Upvotes: 1

Simon
Simon

Reputation: 736

You have an issue with your code already since the 65 - 123 contains letters, but it also contains [] _ to name a few.

so you probably want 65-90 for A-Z then 97-122 for a-z 48-57 for 0-9. then check each character you want to allow, they probably wont be in a range.

If you look at the ascii chart here https://theasciicode.com.ar/ascii-printable-characters/question-mark-ascii-code-63.html you will see all the numbers you need to include (or exclude)

On the keyUp event, you could look at the value and then change the last character to the * if you wish, but remember that will change the actual value, not just mask it.

If you want it masked, you should use an <input type="password"> field, which has that behaviour by default.

Upvotes: 0

Related Questions