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

8

Form validation with JavaScript is routine in web development, but it always causes a headache! My situation is this: I can not allow numbers to enter a field of type 'name', but how can I do this?

    
asked by anonymous 13.03.2014 / 12:42

7 answers

9

I recommend using HTML5 Pattern for the type of a type check since it is not necessary to use Javascript.

In case, your html would be as follows:

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

Explanation:

"[^0-9]+" would be a Regular Expression (RegEx) informing you that the user can not report 0 to 9 (that is all), and + informs that it has no character limit, you can put a limit by replacing + with {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

    
13.03.2014 / 12:59
7

The best thing to do is to get a regular expression and compare the input with the expression.

Regular expression:

var verifyInt = /\d+/g;

And now you get in the input and use match for if the input contains the characters defined in verfyInt by matching 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

    
13.03.2014 / 12:49
1

In this way I have already used and tested it and it is legal.

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

hug.

    
13.03.2014 / 12:55
1

You can use it 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);
    });
});
    
13.03.2014 / 13:00
1

2 MODES.

1st 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 I would just put it 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;
}

...

<input type="text" id="xyz" onKeyPress="return apenas_string(event)" >
    
13.03.2014 / 13:02
1

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();

});
    
13.03.2014 / 14:54
1

As you quote in the question:

  • I can not allow numbers to be entered

This function will not allow the input 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 working .

    
13.03.2014 / 13:07