7

Estou tendo problemas ao validar um formulário com javascript puro, quando chega no campo do tipo "checkbox" sempre retorna falso, mesmo com "checked = true".

Por que está acontecendo isso? Como posso resolver?

function val(){
    var inputs = document.form.getElementsByTagName('input');
    var label = document.form.getElementsByTagName('label');

    for(i=0;i<inputs.length;i++){

        var tipo = inputs[i].type;
        var nome = inputs[i].getAttribute('name');
        var elemento = inputs[i].getAttribute('id');

        if(tipo == 'text' && inputs[i].value.length < 5){

            label[i].childNodes.item(1).innerHTML = '*';
            document.getElementById(elemento).focus();
            return false;

        }else if(tipo == 'checkbox' && document.form.nome.checked !== true){

            label[i].childNodes.item(1).innerHTML = '*';
            document.getElementById(elemento).focus();
            return false;

        }else if(tipo == 'radio' &&  document.form.nome.checked !== true){

            label[i].childNodes.item(1).innerHTML = '*';
            document.getElementById(elemento).focus();
            return false;

        }else{
            label[i].childNodes.item(1).innerHTML = '';
            }
    }
    alert('enviado');
}

Exemplo no JSBin

4 Respostas 4

3

Update

Baseado no discutido até agora, segue versão final funcional: http://jsbin.com/ruhocoru/16

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
  function val(){
    var validado = true;
    var inputs = document.form.getElementsByTagName('input');
    var labels = document.form.getElementsByTagName('label');


    for (i = 0; i < inputs.length; i++) {
      var elem = inputs[i];
      var tipo = elem.type;

      labels[i].innerHTML = labels[i].innerHTML.replace(/[*]/g, "");

      if (tipo == 'text' && elem.value.length < 5) {
        if (labels[i].innerHTML.indexOf("*") < 0) labels[i].innerHTML += '*';
        validado = false;
      } else if (tipo == 'checkbox' && elem.checked !== true) {
        if (labels[i].innerHTML.indexOf("*") < 0) labels[i].innerHTML += '*';
        validado = false;
      } else if (tipo == 'radio' &&  elem.checked !== true) {
        var radioElems = document.getElementsByName(elem.name);
        var radioValidated = false;

        for (j = 0; j < radioElems.length; j++) {
           if (radioElems[j].checked)
             radioValidated = true;
        }

        if (!radioValidated) {
          labels[i].innerHTML += '*';
          validado = false;
        }
      }
    }

    if (validado)
      alert('enviado');
  }
</script>
</head>

<body>
  <form name="form" action="#">
    <label for="nome">Seu nome</label>
    <input type="text" name="nome" value="Tiago" /><br/><br/>

    <label for="check1">Pergunta 1</label><br />
    <input type="checkbox" name="check1" checked="checked" />Opção 1<br/><br/>

    <label for="check2">Pergunta 2</label><br />
    <input type="checkbox" name="check2" checked="checked" />Opção 2<br/><br/>

    <label for="rd">Selecione uma opção</label><br />
    <input type="radio" name="rd" />Sim
    <input type="radio" name="rd" />Não
  </form>

  <div id="message" style="margin: 20px 0;"></div>
  <button type="button" onclick="return val();">valida</button>
</body>
</html>

Há um pequeno bug na relação de inputs[radio] porque não há um label para cada um deles. Esse fica a seu cargo resolver :)

9
  • Valeu @Thiago, funcionou aqui, porém gera uma espécie de loop sempre que uso dois inputs tipo radio, sempre que seleciono 1 dá erro no outro e vice versa, você sabe como resolvo isso, desculpa cara, é que sou iniciante em javascript rs
    – Odair
    21/02/2014 às 0:10
  • 1
    Vou analisar e posto uma correção :) 21/02/2014 às 1:08
  • 1
    Cara, tá difícil conseguir sair aqui, mas relaxa que posto algo assim que progredir... 21/02/2014 às 1:51
  • 1
    Deu trabalho, mas consegui sair do outro lado. Dá uma olhada no jsbin... 21/02/2014 às 3:22
  • 1
    Muito obrigado @Thiago, funcionou perfeitamente, era isso mesmo :)
    – Odair
    21/02/2014 às 3:25
3
tipo == 'checkbox' && document.form.nome.checked !== true

Acredito que no lugar de document.form.nome seria, a variavel input a ser comparada, pois nome é do tipo text

tipo == 'checkbox' && inputs[i].checked !== true
3
  • 1
    Exatamente. Funcionou aqui. 20/02/2014 às 22:53
  • @Perdeu era isso mesmo, porém eu tenho que selecionar sempre as duas checkbox senão vai sempre dar erro, só que terá checkbox que o usuário deixará vazia. Por isso tentei fazer a verificação do nome... Tem alguma solução para isso?
    – Odair
    20/02/2014 às 23:59
  • Remova os return false e use uma variável booleana para controlar se o formulário foi validado no final, antes de enviar. Para tal atribua false em cada validação falha. Incluí uma resposta minha abaixo com o fonte editado completo da função. 21/02/2014 às 0:06
2

Segue um exemplo utilizando AJAX. Esse exemplo é de cadastro de alunos

$(document).ready(function(){
    $("#formCad").submit(function(event) {                          
        event.preventDefault(); //tira o evento do submit

        var curso = new Array();
                        $("input[name='curso[]']:checked").each(function() {
                            curso.push($(this).val());
                        });
        $.post(
            "cadastro_usuario.php",
            { nome:  curso: curso },
            function(data){ 
                $('#retornoAjax').hide();
                $('#retornoAjax').css('color','blue');                  
                $('#retornoAjax').html(data);   
                $('#retornoAjax').fadeIn(1000);     
            }
        );     
    });

});
1
  • Valeu @Flávia, mas para essa aplicação posso usar apenas javascript puro, não posso usar JQuery.
    – Odair
    21/02/2014 às 0:04
1

É possível realizar tal validação com HTML5.

<input type="checkbox" id="model_confirmar" name="model[confirmar]" required />

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 .