Validar formulários

[Odair Oliveira_163654 2]

Estou, tentando validar um formulário, com javascript puro, somente pela classe dos elementos, mas quando não consigo pegar a classe, sempre dá o erro: object NodeList...

 

 

[inline]var classe = document.Formulario.getAttribute('class');

var stringdividida = classe.split("-");

var inputs = document.Formulario.getElementsByClassName(stringdividida[0]);
alert(inputs);[/inline]

[fabricioserralvo 5]

Não entendi sua dúvida, você pode ser mais claro? Posta seu código no pastebin ou site similar.

 

[]'s

[Odair Oliveira_163654 2]

Não entendi sua dúvida, você pode ser mais claro? Posta seu código no pastebin ou site similar.

 

[]'s

 

Então fabrício, no caso eu quero fazer a validação do meu formulário somente com javascript, só que quero validar pela class html dos elementos:

Esse é meu javascript:

[inline]<script type="text/javascript">

//validar contatos

function ValidaContato(){

//aqui pega a classe do elemento, no caso as classes estão separadas por hifem class="left-campo"

var classe = document.Formulario.getAttribute('class');

//aqui divide a string

var stringdividida = classe.split("-");

//aqui pega somente o que está antes do hifen

var string = stringdividida[0];

//aqui da erro. Era para retornar somente o que estava antes do hifem mas me retorna "object NodeList" :/

var inputs = document.Formulario.getElementsByClassName(string);

alert(inputs);

}

</script>[/inline]

 

Esse é meu html[inline]

<form class="left-campo" id="formulario-contato" name="Formulario" action="#" method="POST">

<label for="nome">Nome <span class="campo_vazio aviso-erro"></span></label>

<input class="inputs-nome" type="text" id="nome" name="nome" value="" autofocus />

<label for="nome">empresa <span class="campo_vazio aviso-erro"></span></label>

<input class="inputs-empresa"type="text" id="nome" name="nome" value="" />

<label for="nome">email <span class="campo_vazio aviso-erro"></span></label>

<input class="inputs-email"type="text" id="nome" name="nome" value="" />

<button class="botao-azul bdrs-5px" type="submit" name="acao" value="Enviar" onClick="return ValidaContato()"><span class="icones left" id="icone-enviar"></span> Enviar mensagem</button>

</form>

[/inline]

[Denis.Santos 7]

Você pode criar um arquivo javaScript e fazer deste modo:

 

$(document).ready( function() {
    $("#formulario").validate({
             // Define as regras
     rules:
     {
             cpf:
             {
             required:true,cpf:true
             },
             senha:
             {
             required:true,maxlength:16
             }
             
             
     },
// Define as mensagens de erro para cada regra
   messages:
     {
              cpf:
            {
                required: "Preencha o campo!!!"
              
            },
             senha:
            {
                required: "Preencha o campo"
              
            }
            
      }
   });
});

[Odair Oliveira_163654 2]

Então, mas é que no caso eu não quero usar Jquery, quero usar javascript puro mesmo....

[William Bruno 1501]

@Odair Oliveira_163654,

 

Não entendi a volta que vc faz pegando primeiro a classe do FORM. Para que isso ?

Pega direto os elementos:

var inputs = document.getElementById("formulario-contato").getElementsByClassName("validar_esse");
alert(inputs);

entendeu ? vc pode dar uma classe para quais inputs quer validar.

 

 

é para estudo ?

se não, use o required do html5, vai te poupar muitas validações.

[Odair Oliveira_163654 2]

 

@Odair Oliveira_163654,

 

Não entendi a volta que vc faz pegando primeiro a classe do FORM. Para que isso ?

Pega direto os elementos:

var inputs = document.getElementById("formulario-contato").getElementsByClassName("validar_esse");
alert(inputs);

entendeu ? vc pode dar uma classe para quais inputs quer validar.

 

 

é para estudo ?

se não, use o required do html5, vai te poupar muitas validações.

 

Olá William é para estudo sim...

Eu queria fazer um script curto que validasse qualquer formulário independente de quantos campos tenha de forma rápida... desenvolvi um script que valida pela classe dos elementos, está funfanfo certinho:

 

[inline]

function ValidaContato(){

var inputs = document.Formulario.getElementsByClassName('validar');

var erro = document.Formulario.getElementsByClassName('campo_vazio');

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

var nome = inputs.getAttribute('name');

var elemento = inputs.getAttribute('id');

if(inputs.value == ""){

erro.innerHTML = "(campo obrigatório)";

document.getElementById(elemento).focus();

return false;

}else if(inputs.type == 'text' && inputs.value.length < 5){

erro.innerHTML = "(Preencha o campo corretamento)";

document.getElementById(elemento).focus();

return false;

}else{

erro.innerHTML = "";

}

}

}

[/inline]

 

[Francis Schiavo 1]

Se é para estudo e você pode utilizar apenas navegadores mais modernos com suporte ao HTML 5, utilize atributos customizados no lugar da classe.

http://html5doctor.com/html5-custom-data-attributes/

 

Você pode utilizar a função querySelectorAll para obter a lista:

https://developer.mozilla.org/pt-BR/docs/DOM/Document.querySelectorAll

 

Exemplo:

<form method="post">

  <input data-validacao="data" name="data_inicio" />

  <input data-validacao="data" name="data_fim" />

  <input data-validacao="email" name="email" />

</form>

e para obter a lista:

var inputs = document.querySelectorAll('input[data-validacao]');

No entanto, como o Willian disse muita validação já vem pronta no HTML 5, inclusive expressões regulares campo à campo com validação e exibição de erros para o usuário gerenciados pelo navegador.

Mais informações sobre essas validações aqui:

http://www.the-art-of-web.com/html/html5-form-validation/