3

Eu tenho uma tela que tem 4 inputs. O valor desses inputs está sendo salvo no meu banco de dados. Mas preciso descobrir como eu faço para poder validar esses campos sendo campos apenas numéricos?

Tentei um code achado na web, mas não deu muito certo.

function checkNumber(valor) {
        var regra = /^[0-9]+$/;
        if (valor.match(regra)) {
            alert("Numero: "+valor);
        }else{
            alert("Permitido somente números);
        }
    };


 <button class="botao1" onblur="checkNumber(this.value);" onclick="publish(JSON.stringify(pl),topic, 2);">3. Publish</button>
8
  • 1
    O evento onblur é para quando vc tirar o foco do campo e vc está colocando ele no botão, você também está passando o value do botão e não dos inputs. Uma forma de funcionar é você colocar a função checkNumber(this.value) no evento onblur de cada input. Commented 13/06/2017 às 16:59
  • Tipo assim Diego? <label class="label">Humidity: </label> <input type="text" id="humidity" size="50" value="" onblur="checkNumber(this.value);"> <br>
    – cardealt
    Commented 13/06/2017 às 17:01
  • Além do que o @DiegoSchmidt disse, acho que você poderia criar uma variavél regexp var regra =new RegExp("/^[0-9]+$/") e na hora de validar o regexp use regra.test(valor) Commented 13/06/2017 às 17:02
  • Correto, assim mesmo. Antes você estava passando o valor do botão e do seu input. Commented 13/06/2017 às 17:02
  • Mas se está usando html5 porque não utilize o input type="number"? Commented 13/06/2017 às 17:04

4 Respostas 4

1

O evento onblur é para quando vc tirar o foco do campo e vc está colocando ele no botão, você também está passando o value do botão e não dos inputs.

Uma forma de funcionar é você colocar a função checkNumber(this.value) no evento onblur de cada input.

Um exemplo funcionando da maneira da sua pergunta:

<!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>

Um exemplo validando varios campos onde contenham uma determinada classe:

<!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>

Um exemplo onde vc queira que um campo tenha exatamente 4 números, a idade por exemplo, usando 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>

Permitindo que um campo contenha somente números usando 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>

Respondendo sua pergunta de como habilitar outro campo caso determinado campo seja válido, usei a propridade disabled do html:

<!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>
4
  • Perfeito Diego!! Muito obrigada!!! :)
    – cardealt
    Commented 13/06/2017 às 17:41
  • Resolveu, mas posso fazer uma pergunta? E se eu quisesse que enquanto o input estiver preenchido com caracter diferente de número, não permitir pular para o input seguinte, como faria?
    – cardealt
    Commented 13/06/2017 às 17:44
  • Editei a resposta. Commented 13/06/2017 às 17:57
  • Muito obrigada!!
    – cardealt
    Commented 13/06/2017 às 19:00
0

Javascript tem funções nativas bem simples que podem lhe ajudar nesse caso. Experimente no console:

var foo;
// preencha foo
isNaN(Number(foo)); //retornará verdadeiro se foo não for uma representação de um número

Como funciona: a função Number tenta converter o valor para numérico, e somente em caso de falha retorna NaN (valor fixo para significar "número inválido"). A segunda função verifica se o valor informado a ela é um NaN.

Vantagens de se usar a função isNaN em conjunto com a Number:

  • Muito rápidas, pois são implementadas no navegador;
  • Menos código para manter;
  • O código que você encontrou na internet não considera números não-inteiros (e.g.: 2.1) como números. A combinação acima considera;
  • Usar funções básicas do Javascript é uma forma agnóstica a frameworks de se resolver problemas. E você pode validar valores que não necessariamente vieram do formulário, se um dia tiver que validar dados de outras fontes.

Você só precisa de uma função mais rebuscada se você quiser forçar um formato de número, mas aí é outro problema.

1
  • Acho que não entendi muito bem :/
    – cardealt
    Commented 13/06/2017 às 17:10
0

Você pode restringir para que o usuário não digite nenhum outro caractere a não ser números através de uma máscara para cada campo. Com a máscara você consegue definir quantos dígitos numéricos cada campo deverá ter. No exemplo abaixo os campos estão restritos a 4, 5, 6 e 7 dígitos, respectivamente.

jQuery(function($){
   $("#numero1").mask("9999");
   
   $("#numero2").mask("99999");
   
   $("#numero3").mask("999999");
   
   $("#numero4").mask("9999999");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>

Número 1 <input type="text" id="numero1" name="numero" maxlength="4" placeholder="4 dígitos numéricos"/><br><br>
Número 2 <input type="text" id="numero2" name="numero" maxlength="5" placeholder="5 dígitos numéricos"/><br><br>
Número 3 <input type="text" id="numero3" name="numero" maxlength="6" placeholder="6 dígitos numéricos"/><br><br>
Número 4 <input type="text" id="numero4" name="numero" maxlength="7" placeholder="7 dígitos numéricos"/><br><br>

Ou, se preferir utilizar somente o HTML5, utilize o campo do tipo number.

Número <input type="number" name="numero">
0

Validação somente números com um ponto separando casas decimais. DEMO

SCRIPT

function checkfloat(e,field){
  if (!(((e.keyCode>=48)&&(e.keyCode<=57))||(e.keyCode==46)))
  {
     alert("Somente numeros inteiros ou fracionários separado por ponto!");
     e.keyCode=0;                   
  }

  if (e.keyCode==46)
  {
     var patt1=new RegExp("\\.");        
     var ch =patt1.exec(field); 

     if(ch==".")
     {
         alert("Mais que um ponto decimal não é permitido");
         e.keyCode=0;
     }                     
  }      
} 

HTML

<input type="text" id="a" size="5" onkeypress="checkfloat(event, this.value)">
<input type="text" id="b" size="5" onkeypress="checkfloat(event, this.value)">
<input type="text" id="c" size="5" onkeypress="checkfloat(event, this.value)">
<input type="text" id="d" size="5" onkeypress="checkfloat(event, this.value)">
1
  • Muito obrigada pelo retorno :))
    – cardealt
    Commented 13/06/2017 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .