The event onblur is for when you take the focus of the field and you are putting it on the button,
you are also passing the value of the button, not the inputs.
One way to work is to put the checkNumber (this.value) function in the onblur event of each input.
An example working the way your question is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da pagina</title>
<script>
function checkNumber(value) {
if (value.trim() !== "") {
var regra = /^[0-9]+$/;
if (value.match(regra)) {
alert("Numero: " + value);
}
else {
alert("Permitido somente números");
}
}
}
</script>
</head>
<body>
<input type="text" name="idade" id="idade" onblur="checkNumber(this.value)"/>
</body>
</html>
An example validating several fields where they contain a given class:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da pagina</title>
<script>
function validaCamposSomenteNumero() {
var inputs = document.getElementsByClassName("somente-numero");
for (var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if (input.value !== "") {
if (isNaN(input.value)) {
alert("Preencha somente número!");
return;
}
}
}
}
</script>
</head>
<body>
<input type="text" name="idade" id="idade" class="somente-numero"/>
<input type="text" name="idade2" id="idade2" class="somente-numero"/>
<input type="button" value="Cadastrar" onclick="validaCamposSomenteNumero()"/>
</body>
</html>
An example where you want a field to have exactly 4 numbers, for example age using HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da pagina</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="idade" id="idade" pattern="^[0-9]{4}$" title="Preencha a idade corretamente."/>
<input type="submit">
</form>
</body>
</html>
Allowing a field to contain only numbers using HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da pagina</title>
</head>
<body>
<input type="number" name="idade" id="idade"/>
</body>
</html>
Answering your question about how to enable another field if a given field is valid, I used the html disabled property:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da pagina</title>
<script>
function validaCampo(value) {
if (value.trim() !== "") {
var campoParaHabilitar = document.getElementById("campo2");
if (!isNaN(value.trim())) {
campoParaHabilitar.disabled = false;
}
else {
campoParaHabilitar.disabled = true;
}
}
}
</script>
</head>
<body>
<input type="text" name="campo1" id="campo1" onblur="validaCampo(this.value)"/>
<input type="text" name="campo2" id="campo2" disabled/>
</body>
</html>
