1

Qual seria uma forma de validar o campo do texto assim que o botão for clicado?

Utilizando apenas JavaScript.

Ex:

Se o campo não for preenchido, e o usuário for clicar no botão ele emite um alerta e não deixaria o formulário ser enviado e iria mostrar qual campo está em branco e faltando o preenchimento.

<form>
  <fieldset>
    <legend>Teste</legend>
    Informe seu nome: <input tpye="text" size="10">
    <p>
    <input type="submit" value="Validar">
  </fieldset>
</form>

3
  • da para você colocar no seu input o required, e o campo seria validado
    – Victor
    Commented 4/12/2017 às 16:25
  • Coloca um idnesse <input> e da um alert pelo javascript. Olha esse link. w3schools.com/js/js_validation.asp Commented 4/12/2017 às 16:25
  • Se achou a resposta útil, não deixe de marcar ✔
    – Sam
    Commented 7/12/2017 às 6:16

3 Respostas 3

3

Simples verificação usando somente JavaScript:

var formulario = document.querySelector('form');

formulario.onsubmit = function(){
   if(!document.querySelector("input[type='text']").value){
      alert("Campo nome vazio!");
      return false;
   }
   
   alert("ok");
}
<form>
   <fieldset><legend>Teste</legend>
   Informe seu nome: <input type="text" size="10">
   <input type="submit" value="Validar">
   </fieldset>
</form>

Sugestão

Seria interessante atribuir ids aos elementos, como <form id="formulario">, ou class nos campos se houverem mais campos no futuro. Isso facilita a a manipulação dos elementos e no desenvolvimento do código.

1

Como você pediu em JavaScript e com alert então ai vai. Primeiro precisará dar um name para o seu input e seu form, e pode fazer isso desta forma como irei mostrar abaixo.

    function validar() {
    
    var nome = formulario.nome.value;
 
      if (nome == "") {
        alert('Preencha o campo com seu nome');
          formulario.nome.focus();
          return false;
       }
    }
    <form name="formulario" action="enviar.php" method="post">
        <fieldset><legend>Teste</legend>
        Informe seu nome: <input  type="text" name='nome'>
        <p>
        <input type="submit" onclick="return validar()">
      </fieldset>
    </form>

Ou simplesmente com HTML, você pode fazer isso

    <form>
      <fieldset><legend>Teste</legend>
        Informe seu nome: <input  type="text" required>
        <p>
        <input type="submit">
      </fieldset>
    </form>

2
  • o jQuery é um framework, ou seja, é o próprio javascript redefinido de uma maneira mais moderna, simples de usar e que utiliza de menos código.
    – Victor
    Commented 4/12/2017 às 16:44
  • resposta editada @LINQ
    – Victor
    Commented 4/12/2017 às 16:56
0

Você pode usar o required

Não é um pop up como você pediu, mas é bem útil para um formulário básico.

<form>
<fieldset><legend>Teste</legend>
Informe seu nome: <input required tpye="text" size="10">
<p>
<input type="submit" value="Validar">
</fieldset>
</form>

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 .