Jump to content
Fórum Script Brasil
  • 0

Validar campo antes de clicar no botão enviar


JonasFloripa

Question

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.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.

Edited by LunarShaman
Link to comment
Share on other sites

  • 0

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.

Edited by BigJah111
Link to comment
Share on other sites

  • 0

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.

Edited by BaldKnight14
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...