You can make your function run when the keypress event is fired with:

$("#purpose").on('keypress', validate);

However, using the keypress event on a text input is generally a bad idea. It doesn't work on mobile devices, and it doesn't trigger when Backspace or Delete is pressed or text is pasted or cut in or out of the input. You should probably use the input event instead:

$("#purpose").on('input', validate);

$('input').keyup(function() {
    var $th = $(this);
    $th.val( $th.val().replace(/[^a-zA-Z0-9]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and numbers.'); return ''; } ) );
});

EDIT:

There are some other good answers here that will prevent the input from taking place.

I've updated mine since you also wanted to show an error. The replace can take a function instead of a string. The function runs and returns a replacement value. I've added an alert to show the error.

http://jsfiddle.net/ntywf/2/

There are a couple of libraries that you could use. If you want to stick to pure JavaScript without any jQuery, then your best option would probably be Validate JS.

There are a ton of jQuery options if you are willing to work with jQuery - these are usually more feature packed and nicer to look at too. You could also use the Validator built into the Foundation Framework - it's called Abide but it uses jQuery.

Hope this helps.

• onKeyValidate is an okay name, but a better name could be validateKeypress.

• It seems very silly to store a RegExp as a string, and then construct it every time. Why not just declare var alpha = /[ A-Za-z]/?

• keyChars appears to check against \x00, the null character, and \x08, the backspace character. Neither of these can ever be passed to onKeypress, so you can just take it out.

• The standard way to get the character code is event.which || event.keyCode.

• event is a global; I don't think you need to pass it in.

Here's a proposed rewrite:

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);".

If you just want to validate the textbox for required use HTML5 required attribute like:

<input type="text" class="form-control" name="mysearchfield" 
value="" id="mysearchfield" placeholder="Company or SmartPages   Category..." autocomplete="off" required>

Validate on blur, or on submit. Don't validate while typing, for exactly the reason you describe.

There are studies/observations that show the people generally complete the entire form and then return to values that are incorrect. Even if you validate on blur they will tend to complete all fields and will then return to fix.

Article: Usable error message presentation in the World Wide Web: Do not show error right away Author: Javier A. Bargas-Avila, Glenn Oberholzer, Peter Schmutz, Marco de Vito, and Klaus Opwis Source: Interactive with Computers, Volume 19, pages 330-341 (2007)

Results of the Study

• When Completing an online form users have two modes: Completion Mode and Revision Mode
• Users tend to ignore immediate error messages when they are in Completion Mode
• Of the size possible ways to present error messages, three proved to be more effective than the others:
  • Present the error afterward, embedded in the form, all at once
  • Present the error afterward, embedded in the form, one by one
  • Present the error afterward, in dialogues, one by one

The study alone suggests you should present error after the user has completed the form -- in other words, on submit.

If you validate on blur, show a simple non-obtrusive error (a highlight and possible a short message next to or under the field). Do not force the user to fix it immediately. You can disable the "submit" button until all fields are validated -- include a small message or popover indicating why the "submit" button is disabled (e.g., "Please fix the highlighted fields before submitting"). You can let the user submit despite errors too and display an additional error message then.

Note that you have to validate on submit if you want make sure you catch errors. Client side validation (i.e., on blur) requires JavaScript and JavaScript can be turned off. It is rare these days, but it is not unheard of. Also, not all browsers support the same level of JavaScript.

Validating on blur helps the user realize something is wrong before they submit, but you will also need to validate on submit to make absolutely sure everything is formatted the way you want it. However, the study quoted above would suggest that validating on blur does not buy you anything that validating on submit already provides.

The first character is unrestricted because you have nested keypress handlers. Try this:

$('.Number').keypress(function (event) {
    var keycode = event.which;
    if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
        event.preventDefault();
    }
});

Your solution is ok, but I also find alternative

<input ... (keypress)="validateKey($event)" >

instead of keypress you can use keydown, and validation function

validateKey(event) {
  let oldval = event.target.value;
  let val = oldval.slice(0,event.target.selectionStart) + event.key + oldval.slice(event.target.selectionEnd);

  // here you have access to input oldval and (current) val

  if(val .... ) return true // allow to push charater
  return false              // not allow to push character
}

Clear the error when the user modifies the field, and re-validate it when they unselect the field.

• See Etsy's registration form for an example.
• If you clear the error when they focus on the field, they might not have read the message.
  • But once they modify the field, you can assume they've established how to fix it.

Additionally, use positive live inline validation to tell the user when their input is valid.

According to the Baymard Institute's benchmarks, validation is done particularly well on the checkout pages of B&H Photo and Etsy.

The Baymard Institute's Usability Testing of Inline Form Validation article is the most comprehensive guide I've come across regarding inline validation.

As an aside, Alan Cooper wrote:

Users don't want to believe that they make mistakes, which means following their mental model must absolve them of blame.

This is why positive inline validation works so well, and negative inline validation should be used sparingly to avoid frustrating your users.

If you're checking a printable key, which is exactly what you seem to be doing, you should use the keypress event instead, since that's the only place you're going to be able to get reliable information about the character the keypress represents. You can't detect numeric keypresses reliably in the keydown event. Also, it's a bad idea to suppress arrow keys and delete/backspace keys. What do you gain from doing that?

There's also some errors: in Firefox, you'll need to get the Event object from the parameter passed into the event handler function, and if you're using a DOM0 event handler function rather than addEventListener() or attachEvent(), you should use return false; to suppress default behaviour. Here's my recommended code:

var input = document.getElementById("your_input_id");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};

Use keypress event. Try with this -

onkeypress="alert(/([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value))"

I would prefer to use onblur in this case.

You can also use jquery -

HTML

<input id="email_address">
<span id="error" style="display:none;color:red;">Wrong email</span>

Jquery

$('#email_address').on('keypress', function() {
    var re = /([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
    if(!re) {
        $('#error').show();
    } else {
        $('#error').hide();
    }
})

DEMO