Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Required do input

por Lucas Amaral Taylor
| 130.7k xp | 59 posts

Olá, eu pus o required no input, só que se eu não preencher o campo o programa calculado msm jeito.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Exemplo</title>
</head>
<body>
    <h1>Exemplo</h1>
    <fieldset>
        <form class="form">
            <label>Primeiro número</label>
            <input type="number" name="x" placeholder="Digite o primeiro número" required>
            <label>Segundo Número</label>
            <input type="number" name="y" Digite aqui o segundo número required>
            <button id="botao">Calcular</button>
        </form>
    </fieldset>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#botao").click(function(){
        event.preventDefault();

        var form = $(".form");

        var x = form.children('input[name="x"]').val();
        var y = form.children('input[name="y"]').val();

        var z = x*y;

        console.log(z)
    });
</script>
</html>

Como eu posso fazer que no momento em que não tiver algum campo preenchido o programa avise o usuario "tal campo não foi preenchido". Eu pensei em usar um if, mas eu acho que deixaria o código complicado quando pode-se na teoria resolver com HTML

2 respostas
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Com if é a melhor solução porque já para o programa na hora, além de ser cross-browser funcionando em todos os navegadores.

$("#botao").click(function(){
        event.preventDefault();

        var form = $(".form");

        var x = form.children('input[name="x"]').val();
        var y = form.children('input[name="y"]').val();


        if (x=='' || y ==''){
            alert("Todos os campos tem que estar preenchidos!")
            return;
        }

        var z = x*y;




        console.log(z)
    });
por Gleilson
| 161.3k xp | 56 posts

O required do primeiro input está OK, mas o do segundo não. No segundo input você digitou isso:

<input type="number" name="y" Digite aqui o segundo número required>

quando o correto seria assim:

<input type="number" name="x" placeholder = "Digite aqui o segundo número" required>

Em resumo, o placeholder do segundo input está incorreto.