Skip to main content
adicionou 1049 caracteres ao conteúdo
Fonte Link
Diego Schmidt
  • 1,1mil
  • 6
  • 7

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>

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>
Fonte Link
Diego Schmidt
  • 1,1mil
  • 6
  • 7

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>