1

Eu queria fazer um formulário mas sem usar <form> porque pretendo mandar os inputspor ajax. O problema é que se tirar o form, ele não irá ser required pois tal como tem dito no W3Schools

O atributo required especifica que um input tem de ser preenchido antes de ser submetido

Sendo assim, o que posso fazer para conseguir? Procurei e encontrei este código:

document.getElementById('put_id_here').validity.valid;

Mas o código acima não deu resultado.

6
  • 1
    Isso funciona bem jsfiddle.net/Sergio_fiddle/97k5n5yj qual é o problema que estás a ter?
    – Sergio
    6/10/2017 às 15:36
  • Tente adicionar um botão <button>. Eu tentei e não deu resposta 6/10/2017 às 15:40
  • Eu tinha o id mal definido no que tentei mas eu queria que ele desse trigger ao required, e não dizer se está vazio ou não 6/10/2017 às 15:41
  • @I_like_trains ok, se queres usar o UI nativo isso não dá sem form.submit. Podes fazer um teu, usando o .validity.valid. Mas se queres que seja automático via browser usa <form> e depois impede de ser submetido com e.preventDefault();
    – Sergio
    6/10/2017 às 15:44
  • @Sergio Pensando melhor, acho que vou apenas mudar a cor da borda para vermelho com um aviso ao lado, mais simples e mais agradável. Poste a sua resposta que eu darei como aceite. 6/10/2017 às 15:50

2 Respostas 2

3

Podes usar o seletor :invalid para aplicar CSS ao input não validado. A única desvantagem é que o CSS carrega logo desde o inicio. Por isso podes juntar uma classe para juntar ao elemento quando receber foco pela primeira vez.

var input = document.getElementById('put_id_here');
var button = document.querySelector('button');
var info = document.querySelector('p');

input.addEventListener('focus', function() {
  this.classList.add('validate');
});

button.addEventListener('click', function() {
  if (input.validity.valid) {
    info.textContent = 'Tudo OK!';
  } else {
    info.textContent = 'O input tem de ser preenchido!';
  }
});
.validate:invalid {
  border: 1px solid red;
}
<input type="text" id="put_id_here" required>
<button>Enviar</button>
<p></p>

2
  • O Senhor poderia me explicar esse tal de validity.valid dentro do código? O nome é bem sugestivo mas não consigo palavras para explicar hehehe
    – user60252
    8/11/2017 às 23:53
  • @LeoCaracciolo seria mais ou menos: input.validador.valido, ou seja o input.validity é um object ValidityState que contém uma série de valores relacionados com o estado de validação do input.
    – Sergio
    9/11/2017 às 4:20
0

Você pode colocar assim.

<form action="javascript:enviar();"> 
   <input type="text" name="text" required>
</form>

<script>

    function enviar() {
        var text = document.getElementsByName('text')[0].value;
        alert( text );
    }

</script>

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 .