Validar todos os campos JS

Front-end
#1

Galera alguém saberia me explicar como posso validar todos os campos quando a pessoa clicar no botão e mostrar uma mensagem com todos os campos que estiverem em vazio e deixar as bordas avermelhadas.

valeu !!

#2

Usando jQuery, ficaria algo como:

[code]$(document).ready(function() {

$('#botao').click(function (event) {

    // Validando o campo nome, por exemplo:

    // 1. Pego o valor que contém no campo 'textfieldNome';
    var nome = $('#textfieldNome').val();

    if (nome = '') {

        // 2. Preencho o atributo 'border' do campo através da propriedade CSS.
        $('#textfieldNome').css({'border':'1px solid red'});

        // 3. Se quiser, pode dar um alerta avisando o que aconteceu...
        alert("O campo NOME é obrigatório."); 

        // ou preencher uma DIV com os resultados errados.
        $('#divResultados').append("O campo NOME é obrigatório.");
    }

});

});[/code]

#3

opa valeu Nicolas

olha montei esse codigo mas não testei ainda você acha que daria certo ja que não manjo muito de js,mas eu não saberia como deixar a borda vermelha no codigo.

[code]function enviar() {
var mensagem = “”; // cria uma variavel do tipo vazio

if(obrigatorio(document.form1.nome)){
	mensagem = mensagem+"\nNome não preenchida";
}
if(obrigatorio(document.form1.dataNascimento)){
	mensagem = mensagem+"\nData de Nascimento não preenchida";
}
if(obrigatorio(document.form1.idade)){
	mensagem = mensagem+"\nIdade não preenchida";
}
if(obrigatorio(document.form1.sexo)){
	mensagem = mensagem +"\nSexo não preenchida";
}
if(obrigatorio(document.form1.rendaMensal)){
	mensagem = mensagem+"\nRenda Mensal não preenchida";
}

}

if(mensagem!= “”)//se a variavel mensagem tiver conteudo,ou seja ,se tiver ocorrido ,algum erro no preenchimento
{
alert(“Preencha os campos em branco !” +mensagem);
}else{ // se não

	document.form1.submit();//envia o formulário

}[/code]
#4

Nicolas Fernandes o que seria esse cara textfieldNome

por exemplo ele vem daqui a informação.

<td><label>Nome</label></td> <td colspan="6"><input type="text" maxlength="40" id="nome" name="nome" value="${facade.nomeProponente}" class="tamanhoGrandeTexto upperCase" onkeypress="return letrasNumerosPontoEspaco(event);">

#5

[quote=RiQuInHo_$_$]Nicolas Fernandes o que seria esse cara textfieldNome

por exemplo ele vem daqui a informação.

<td><label>Nome</label></td> <td colspan="6"><input type="text" maxlength="40" id="nome" name="nome" value="${facade.nomeProponente}" class="tamanhoGrandeTexto upperCase" onkeypress="return letrasNumerosPontoEspaco(event);">[/quote]
Esse meu textfieldNome é um exemplo, ué. Você deve substituir o meu textfieldNome por nome, que é o ID de seu input neste seu código.

#6

então fiz do jeito que vc falou ,mas ele nem se quer verifica quando o campo esta vazio ate coloquei os alert pra ver onde estao passando mas nada acontece…

[code]$(document).ready(function() {  
    $('#botaoValida').click(function (event) {  
		  alert("Passou botao");
        // Validando o campo nome, por exemplo:  
  
        // 1. Pego o valor que contém no campo 'textfieldNome';  
        var nome = $('#nome').val();  
		  alert("Passou 1");
        if (nome = '') {  
			  alert("Passou 2");
            // 2. Preencho o atributo 'border' do campo através da propriedade CSS.  
            $('#nome').css({'border':'1px solid red'});  
			  alert("Passou 3 cor borda");
			  
            // 3. Se quiser, pode dar um alerta avisando o que aconteceu...  
            alert("O campo NOME é obrigatório.");   
  
            // ou preencher uma DIV com os resultados errados.  
            $('#nome').append("O campo NOME é obrigatório.");  
        }  
      
    });  
});[/code]
#7

Sim, pois sua validação está errada.if (nome = '') { ... }O correto é:if (nome == '') { ... }

#8