How to check if there are numbers inside an input with Javascript?

Question

Form validation with Javascript is something routine in web development, but always cause headaches! My situation is as follows: I cannot allow numbers to enter a 'name' field, but how can I do this?

Answer 1

I recommend the use of the property Pattern from HTML5 for a type check, as it is not necessary to use Javascript.

In this case, your html would be the following:

<input type=nome pattern="[^0-9]+"/>

Explanation:

"[^0-9]+" would be a Regular Expression(Regex) stating that the user cannot enter numbers from 0 to 9(that is all), and the + informs that it has no character limit, you can put a limit by replacing the + for {50} for example there would be a limit of 50 characters.

Compatibility:

The Pattern property is present in all browsers that support HTML5.

Example running on Jsfiddle

Answer 2

The best you can do is get a regular expression and compare the input with the expression.

Regular expression:

var verifyInt = /\d+/g;

And now you take the input and you use the match if the input contains the characters defined in verfyInt equaling the null:

if ($("#idInputNome").val().match(verifyInt) != null) {
    alert("A input Nome contém caracteres numéricos!");
}

EDIT: Follow the fiddle:

Fiddle

Fiddle with validation to submit form:

Fiddle with Submit form

Answer 3

This way here I’ve used and tested and it’s cool.

$('#id_do_seu_campo_input').bind('keyup', function() { 
    $(this).val( $(this).val().replace(/[^a-z]/g,'') ); 
});

hug.

Answer 4

You can use this way too.

$(document).ready(function(){
    $("#idInputNome").keypress(function (e) {
        var valor = String.fromCharCode(e.which);
        return !$.isNumeric(valor) ||
            (e.keyCode == 46 || e.keyCode == 9 ||
            e.keyCode == 8 || e.keyCode == 37 || e.keyCode == 39);
    });
});

Answer 5

2 modes.

first mode create through an input mask

<script src="jquery.js" type="text/javascript"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js" type="text/javascript"></script>

And then would put only to accept ex characters:

jQuery(function($){
 $.mask.definitions['h'] = "[A-Za-z]";
  $("#ID_SeuCampo").mask("#hhhhhh");
});

I believe it will work..

another method is:

function apenas_string(event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode >= 48 && keyCode <= 57 || keyCode == 8 || keyCode == 46 || keyCode == 37 || keyCode == 39) return true;
return false;
}

NOTE: in the keycode above are just numbers, you need to find the letters, but I do not know if employee in Firefox...I know that the way to capture keycode in firefox is different.. so I put var keycode = several methods...

<input type="text" id="xyz" onKeyPress="return apenas_string(event)" >

Answer 6

As you quote in the question:

• I can’t allow numbers to enter

This function will not allow the entry of invalid characters (numeric in your case), can be used together with a final validation, as demonstrated by colleagues.

$(document).ready(function() {
  $("#edt_text").keydown(function (e) {        
    // Ensure that it is a number and stop the keypress
    if ((((e.keyCode < 48 || e.keyCode > 105)) || !(e.keyCode > 57 && e.keyCode < 96))) {
        if(e.shiftKey) return;
        e.preventDefault();
    }
  });
});

Here’s a example working.

Answer 7

I think the best solution is to check if the key being pressed corresponds to a number. Something like this should solve the problem:

$('input').on('keypress', function(event) {

    if(/\d/.test(String.fromCharCode(event.keyCode))) event.preventDefault();

});