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?
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?
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]+"/>
"[^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.
The pattern property is present in all browsers that support HTML5.
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 with validation to submit form :
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.
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);
});
});
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");
});
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)" >
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();
});
As you quote in the question:
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();
}
});
});