How to Prevent Invalid Characters from Being Typed into Input Fields

How to prevent invalid characters from being typed into input fields

To prevent it from being set in the first place, you can return false on the keydown event handler, thus preventing the event from propagating any further.

I wrote the example below using jQuery, but you can use the same function when binding traditionally.

Though it's important to validate on the server-side as well, client-side validation is important for the sake of user friendliness.

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});

How to prevent users from entering invalid characters inside an input field

You can do this using the jQuery keyup(..) method. You will want to check that the event.keyCode is something valid. If it is not valid, you can prevent the event with preventDefault().

Remember to validate the data sent to the server because anything you do in javascript can be subverted.

Here is a library to do it for you: http://www.itgroup.com.ph/alphanumeric/

How to prevent invalid input for input field

Block '+' and '-' key on key press

<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>$(document).ready(function(){
});</script></head><body><div class="parent"><input type="number" onkeypress='return event.charCode != 43 && event.charCode != 45'></input></body></html>

How do I prevent invalid characters from being entered into a form?

This is the function you are looking for

function validateAnswer(src) {
    var questions = document.getElementById("questions");
    var rule = questions.options[questions.selectedIndex].value;
    if(rule=="no_numbers") src.value = src.value.replace(/\d/g, '');
    if(rule=="no_letters") src.value = src.value.replace(/\w/g, '');
}

just send the input field reference to the function and set it to onkeyup event instead:

<input type="text" name="answer" onkeyup="validateAnswer(this);" />

you should also hook the onchange event of the selectbox to reset the value of the input box. I suggest you also consider the HTML5 pattern attribute. See

the fiddle
patern attribute support
workaround for unsupported browsers

How to prevent user from copy-pasting text with invalid characters into input text field immediately on copy-paste action?

You only test there is one char there

Here is a better regex - also we do not need to assign it every time

const regex = /^[a-z]+$/gi; // gi makes A-Z irrelevant

function validatePaste(e) {
  const copiedText = e.clipboardData.getData('text')
  console.log(copiedText, regex.test(copiedText))
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes if copiedText has any invalid characters
    return false;
  }
}

<input type="text" onpaste="validatePaste(event)">

Disable some characters from input field

Try this

$(function(){
  $('#txt').keypress(function(e){
    if(e.which == 97 || e.which == 98 || e.which == 99 || e.which == 110 || e.which == 111 || e.which == 65 || e.which == 66 || e.which == 67 || e.which == 78 || e.which == 79 || e.which == 49 || e.which == 50 || e.which == 51 || e.which == 52 || e.which == 53){
    } else {
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt' value='' onpaste="return false" />

How to Prevent Invalid Characters from Being Typed into Input Fields