How to prevent all special characters in a form

Question

So I am trying to prevent all special characters in a form. I want only numbers and alphabet characters. For some reason my javascript below is always shows special characters event if I have only "232 elm".

I also want to use a period or exlamation point. Mainly I am trying to prevent these ¡™£¢∞§¶•ªº. We have users that like to use the degree symbol instead of spelling "degree".

This code always shows the alert no matter what is typed?

var alphanumers = /^[a-zA-Z0-9]+$/;

if(!alphanumers.test($("#notes").val())){
   alert('You have special characters on instructions field.');
   e.preventDefault();
   return false;
}

A space is a special character; just add a space (`/^[A-Za-z0-9 ]+$/`) — Chris Forrence, Jan 17 '17 at 19:39
You could use the [pattern attribute on input](http://www.w3schools.com/tags/att_input_pattern.asp). *It does not support safari.* — Igor, Jan 17 '17 at 19:40
@igor who cares for safari;) kidding aside: You of course need to be clear which symbols you need and include them in your regex! If you want whitespaces and punctuation, you have to include them as well, e.G. `/^[a-zA-Z0-9 .,!;]+$/`. Also, please add a security check on the server side if you are really serious about excluding these kind of characters. — Christoph, Jan 17 '17 at 19:46
@Christoph - agreed :) jdog - I recommend you test your regex out when you build them outside of your code to ensure that any errors you receive (or unexpected behavior) are not a result of the expression or a test value. Here is a site I always use when building/testing an expression: [Regex101](https://regex101.com/) — Igor, Jan 17 '17 at 19:49
@igor Thanks for the link. I have always wondered why this didn't exit before. Regex for Dummies. THANK YOU. — jdog, Jan 17 '17 at 21:53

score 1 · Answer 1 · answered Jan 17 '17 at 21:00

This works for me:

HTML:

<h1>DEMO1</h1>
<input type="text" id="data" name="data" onkeyup="checkInput()">


<h1>DEMO2</h1>
<form action="#" method="post" onsubmit="return checkForm(this)">
 <input type="text" id="data2" name="data" value="123abc+-*/">
 <input type="submit">
</form>

Javascript:

DEMO1:
    function checkInput(){
        var testit = $('#data').val();
        if( /[^a-zA-Z0-9\-\/]/.test( testit ) ) {
           $('#data').css('background', '#f00');
        }else{
           $('#data').css('background', '#fff');
        }
    }

DEMO2:
    function checkForm( theForm ){
        var testit = $('#data2').val();
        if( /[^a-zA-Z0-9\-\/]/.test( testit ) ) {
           $('#data2').css('background', '#f00');
            return false;
        }else{
           $('#data2').css('background', '#fff');
            return true;
        }
    }

Demo: http://codesheet.org/codesheet/dMslCMmZ

score 0 · Answer 2 · edited May 23 '17 at 12:08

I totally love this script! :

$("input").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
         // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
         // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number or alphabet and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 90)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Here is the original source on stackoverflow, its for inputs to stop anything but nubers, i modified it a bit, hope it helps!

Try the jsfiddle

How to prevent all special characters in a form

2 Answers2