Validar campo antes de clicar no botão enviar

JonasFloripa · Fevereiro 23

Estou criando um formulário e tem um campo onde a pessoa digita um valor número, tipo kilimetragen do veícul. Mas preciso que seja feito uma validação do valor que ela digitou quando ela for para o próximo campo, retornando se o valor digitado é superior ao limite permitido.
Já procurei vários modelos de código javascript, mas todos dão exemplo de fazer a validação após clicar no botão enviar.

LunarShaman · Março 15

Para validar o campo enquanto o usuário digita e antes de passar para o próximo campo, você pode usar o evento input para verificar o valor e exibir uma mensagem de erro se necessário. Aqui está um exemplo de como você pode fazer isso:

<!DOCTYPE html>
<html>
<head>
    <title>Validação de Quilometragem</title>
</head>
<body>
    <form>
        <label for="quilometragem">Quilometragem do Veículo:</label>
        <input type="number" id="quilometragem" name="quilometragem" oninput="validarQuilometragem()" required>
        <span id="erroQuilometragem" style="color: red;"></span>
        <br><br>
        <label for="outroCampo">Outro Campo:</label>
        <input type="text" id="outroCampo" name="outroCampo">
        <br><br>
        <input type="submit" value="Enviar">
    </form>

    <script>
        function validarQuilometragem() {
            var inputQuilometragem = document.getElementById("quilometragem");
            var erroQuilometragem = document.getElementById("erroQuilometragem");
            var quilometragem = inputQuilometragem.value;

            // Limite permitido
            var limite = 100000;

            if (quilometragem > limite) {
                erroQuilometragem.textContent = "A quilometragem não pode ser superior a " + limite;
                inputQuilometragem.setCustomValidity("A quilometragem não pode ser superior a " + limite);
            } else {
                erroQuilometragem.textContent = "";
                inputQuilometragem.setCustomValidity("");
            }
        }
    </script>
</body>
</html>

Neste código de exemplo escrito pelo meu amigo com king slots, a função validateMileage é chamada sempre que o usuário insere algo no campo de milhagem. Ela verifica se o valor inserido excede o limite válido (nesse caso, 100.000) e exibe uma mensagem de erro se isso acontecer. Se o valor for válido, a mensagem de erro será excluída.

Editado Março 16 por LunarShaman

JonasFloripa · Março 19

Era isso mesmo que eu queria.. Muito obrigado.

BigJah111 · Abril 12

Para validar o campo em tempo real, você pode usar o evento input no JavaScript para verificar o valor à medida que ele é digitado. Aqui está um exemplo simples de como você pode fazer isso:

// Selecione o campo de entrada
const input = document.getElementById('seuCampoId');

// Adicione um ouvinte de evento de entrada
input.addEventListener('input', function() {
    // Obtenha o valor atual do campo
    const valor = parseFloat(input.value);

    // Defina o limite máximo permitido
    const limite = 100; // exemplo de limite

    // Verifique se o valor é maior que o limite
    if (valor > limite) {
        // Se for maior, exiba uma mensagem de erro
        input.setCustomValidity('O valor não pode ser maior que ' + limite);
    } else {
        // Se estiver dentro do limite, limpe qualquer mensagem de erro existente
        input.setCustomValidity('');
    }
});

Esse código foi escrito por um colega meu de king slots. Certifique-se de substituir 'seuCampoId' pelo ID do seu campo de entrada e ajustar o limite conforme necessário para o seu formulário.

Editado Abril 13 por BigJah111

BaldKnight14 · Abril 15

Você pode usar eventos de teclado em JavaScript para validar o campo enquanto o usuário digita. Aqui está um exemplo simples de como fazer isso:

<!DOCTYPE html>
<html>
<head>
    <title>Validação de Valor Numérico</title>
</head>
<body>
    <form>
        <label for="km">Kilometragem:</label>
        <input type="text" id="km" name="km" onkeyup="validarKm(this)">
        <span id="kmError" style="color: red;"></span>
        <br><br>
        <label for="campo2">Próximo Campo:</label>
        <input type="text" id="campo2" name="campo2">
    </form>

    <script>
        function validarKm(input) {
            var valor = parseInt(input.value);
            var limite = 100000; // Exemplo de limite

            if (isNaN(valor)) {
                document.getElementById("kmError").textContent = "Digite um valor numérico.";
            } else if (valor > limite) {
                document.getElementById("kmError").textContent = "O valor não pode ser superior a " + limite + ".";
            } else {
                document.getElementById("kmError").textContent = "";
            }
        }
    </script>
</body>
</html>

Este código foi escrito por um colega meu de slot rico, a função validarKm é chamada toda vez que uma tecla é pressionada no campo de entrada de kilometragem. Ela verifica se o valor digitado é um número e se é superior ao limite estabelecido. Se for, exibe uma mensagem de erro. Você pode ajustar o limite e a mensagem de erro conforme necessário para o seu formulário.

Editado Abril 16 por BaldKnight14

Entrar

Validar campo antes de clicar no botão enviar

Pergunta

JonasFloripa

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

LunarShaman

Link para o comentário

Compartilhar em outros sites

JonasFloripa

Link para o comentário

Compartilhar em outros sites

BigJah111

Link para o comentário

Compartilhar em outros sites

BaldKnight14

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades