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 character set consists of the numbers 0 to 9 and letters A to Z. In the perl programming language, the underscore character ( _ ) is also considered to be a member of the alphanumeric set of characters"

This is for a field where users can pick a custom url. I would like to prevent users from entering invalid characters.

Ideas? Thanks

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 character set consists of the numbers 0 to 9 and letters A to Z. In the perl programming language, the underscore character ( _ ) is also considered to be a member of the alphanumeric set of characters"

This is for a field where users can pick a custom url. I would like to prevent users from entering invalid characters.

Ideas? Thanks

• javascript
• jquery

• 3 Make sure that whatever you do in Javascript, you also have some filtering once it reaches the server! – Chris Cooper Commented Sep 25, 2011 at 1:31

4 Answers 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..ph/alphanumeric/

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"
       autoplete="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;
    }
  });
});

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.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="txtExample"/>

added with example.