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

Question

Given a text input field. How can I prevent users from entering spaces, and other other than letters numbers or dashes (-).

Alphanumerics only - \"The alphanumeric

Answer 1

DEMO - JS Fiddle Link

Sorry for the late response. Though my answer is late. I have modified few changes to the answer and here it goes.

Validation Required

1. Restrict Digits entering on initial
2. Restrict Spaces, special characters but allow backspace and delete

3. Enable Alpha Numeric Characters

   
   

     <input name="pac_code" id="input_8_6" type="text" value="" class="form-control medium pacerror pacvalid" data-rule-maxlength="9" data-rule-minlength="9" maxlength="9" minlength="9" placeholder="Porting authorisation code (PAC) *" data-rule-required="true"
       autocomplete="off" size="9">
     <label for="input_8_6" style="color: #ff0000;font-weight: 300;font-size: 12px;margin-bottom: 1%;">Example: ABC123456</label><br />
     <label class="PAC_error error" style="display:none;">Invalid PAC Format</label>
   </div>
   

JQuery

jQuery(document).ready(function() {
  $('#input_8_6').bind('keypress', function(event) {
    var regex = new RegExp("^[a-zA-Z0-9\b]+$");
    var regchar = new RegExp("^[a-zA-Z\b]+$");
    var regnum = new RegExp("^[0-9\b]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    var pacvalue = $(this).val().length;
    if (!regex.test(key)) {
      event.preventDefault();
      return false;
    } else if (pacvalue <= 2) {
      for (i = 0; i <= 2; i++) {
        if (!regchar.test(key)) {
          event.preventDefault();
          return false;
        }
      }
    } else if (pacvalue >= 3) {
      for (j = 4; j <= 9; j++) {
        if (!regnum.test(key)) {
          event.preventDefault();
          return false;
        }
      }
    } else {
      return true;
    }
  });
});

Answer 2

Though my answer is very late, but this may help for further readers/techie's. Who wants to implement a textbox to accepts with below condition.

• should accept Alphabets.
• should accept Numbers.
• should not accept any special characters.

Below is the code.

$("input[name='txtExample'] ").focus(function (e) {
		if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57)  || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
			event.preventDefault();
		}
	}).keyup(function (e) {
		if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57)  || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
		event.preventDefault();
			}
	}).keypress(function (e) {
		if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57)  || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
			event.preventDefault();
		}
	
	});

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

added with example.

Answer 3

There are plenty of Javascript validation libraries out there. A quick Google search for 'javascript validation' produced the JQuery Validation plugin plugin as the first hit, so that's probably a good place to start.

As @Chris Cooper said, make sure that you also do server-side validation, because it's pretty trivial for a user to turn off javascript and avoid your client-side validation rules.

Answer 4

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/