[Resolvido] Validando caixa SELECT do FORM

LostSoul · Setembro 2, 2010

Olá, boa tarde a todos! Estou com uma pequena dúvida, eu uso Jquery Validation no meu formulário de contato, mais no meu formulário eu tenho uma caixa de escolha, ou seja; uma caixa SELECT. Gostaria de saber se há possibilidades de validar essa caixa! Vou explicar como.

Exemplo:

Tenho uma caixa de escolha no meu form que tem os seguiontes campos;

Opção0 - "Escolha uma sugestão" - Esse fica sempre visível antes do usuário escolher

Opção1 - Suporte

Opção2 - Sugestões

Opção3 - Vendas

Tipo, quero que o usuário seja obrigado a escolher uma dentre as opções de 1 a 3.

Segue abaixo o código JavaScript que estou utilizando, creio que seja nele que devo acrescentar.

<script type="text/javascript">
            $(document).ready( function() {
                $("#formularioContato").validate({
                    // Define as regras
                    rules:{
                        campoNome:{
                            // campoNome será obrigatorio (required) e terá tamanho minimo (minLength)
                            required: true, minlength: 2
                        },
                        campoEmail:{
                            // campoEmail será obrigatorio (required) e precisará ser um e-mail válido (email)
                            required: true, email: true
                        },
	        campoMensagem:{
                            // campoMensagem será obrigatorio (required) e terá tamanho minimo (minLength)
                            required: true, minlength: 2
                        }
                    },
                    // Define as mensagens de erro para cada regra
                    messages:{
                        campoNome:{
                            required: "Digite o seu nome!",
                            minlength: "O seu nome deve conter, no mínimo, 2 caracteres!"
                        },
                        campoEmail:{
                            required: "Digite o seu e-mail!",
                            email: "Digite um e-mail válido!"
                        },
	       campoMensagem:{
                            required: "Digite a sua mensagem!",
                            minlength: "A sua mensagem deve conter, no mínimo, 2 caracteres!"
                        }
                    }
                });
            });
</script>

Fico agradecido a todos!

William Bruno · Setembro 2, 2010

mesma coisa.. basta colocar pelo name, e garantir que a opção 'default' tenha value=""

campoMensagem:{
                            // campoMensagem será obrigatorio (required) e terá tamanho minimo (minLength)
                            required: true, minlength: 2
                        },
                campoSelect:{
                            required: true
                        }

ai teu html, deve ser algo como:

<select name="campoSelect">
   <option value="">Escolha uma sugestão</option>
   <option value="Opcao1">Suporte</option>
   <option value="Opcao2">Sugestões</option>
   <option value="Opcao3">Vendas</option>
</select>

LostSoul · Setembro 3, 2010

Prezado William, eu sei que a codificação em java seria da mesma forma, mais o quero é que o usuário tenha que escolher uma das 3 opções (Suporte, sugestões ou venda), para evitar que a mensagem seja enviada sem a seleção no campo assunto. Tipo, não quero que o usuário permaneça com o assunto = "Escolha uma sugestão".

Eu já tentei da forma que você demonstrou mais não tive sucesso! Preciso de uma forma de que (ASSUNTO = ESCOLHA UMA SUGESTÃO) resulte em FALSO.

William Bruno · Setembro 3, 2010

hum...

estamos programando em javascript, que não tem nada a ver com Java

você testou oque eu sugeri ?

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#form_teste").validate({
		rules:{
			assunto:{
				required: true
			}
		},
		messages:{
			assunto:{
				required: "Escolha um assunto!"
			}
		}
	});
});
</script>
</head>
<body>
	<form method="post" action="processa.php" id="form_teste">
		<label>Assunto: <select name="assunto">
			<option value="">Escolha uma sugestão</option>
			<option value="Opcao1">Suporte</option>
			<option value="Opcao2">Sugestões</option>
			<option value="Opcao3">Vendas</option>
		</select></label>
		<label><input type="submit" name="enviar" value="enviar" /></label>
	</form>
</body>
</html>

veja que pelo value, ser igual a vazio "", o required do jquery.validate, não vai deixar você enviar o form, se a opção: 'Escolha uma sugestão', estiver selecionada.

só isso.

LostSoul · Setembro 3, 2010

Prezado William, infelizmente não funcionou! Abaixo segue meu código.

Ha, ouve um equívoco na escrita do post anterior, eu quis dizer JavaScript mesmo!

<script type="text/javascript">
            $(document).ready( function() {
                $("#formularioContato").validate({
                    // Define as regras
                    rules:{
                        campoNome:{
                            // campoNome será obrigatorio (required) e terá tamanho minimo (minLength)
                            required: true, minlength: 2
                        },
                        campoEmail:{
                            // campoEmail será obrigatorio (required) e precisará ser um e-mail válido (email)
                            required: true, email: true
                        },
	        campoAssunto:{
	             //campoAssunto será obrigatorio (required) e tera que escolher uma (opção)
                             required: true
                        },
	        campoMensagem:{
                            // campoMensagem será obrigatorio (required) e terá tamanho minimo (minLength)
                            required: true, minlength: 2
                        }
                    },
                    // Define as mensagens de erro para cada regra
                    messages:{
                        campoNome:{
                            required: "Digite o seu nome!",
                            minlength: "O seu nome deve conter, no mínimo, 2 caracteres!"
                        },
	        campoAssunto:{
	             required: "Escolha um assunto!",
	        },
                        campoEmail:{
                            required: "Digite o seu e-mail!",
                            email: "Digite um e-mail válido!"
                        },
	       campoMensagem:{
                            required: "Digite a sua mensagem!",
                            minlength: "A sua mensagem deve conter, no mínimo, 2 caracteres!"
                        }
                    }
                });
            });
</script>

Testei o código que você postou e também não funcionou.

Abaixo o meu campo SELECT.

<select name="campoAssunto">
		<option value="">Selecione uma opção</option>
		<option value="1">Dúvidas</option>
		<option value="2">Sugestões</option>
		<option value="3">Inscrição</option>
		<option value="4">Publicidade / Divulgue a sua marca</option>
</select>

Valeu!!!

William Bruno · Setembro 3, 2010

hum... 'impossível' não ter funcionado.

Confira os caminhos para as libs jQuery.

coloque um link para o teu site.

LostSoul · Setembro 3, 2010

Realmente fiquei surpreso com o não funcionamento! Mais já conferi tudo e está tudo ok! Mais também efetuei o teste com o modelo que você enviou no post anterior, e se você der uma analisada vai ver que ele não funcionou também! Não sei por que disso!

William Bruno · Setembro 3, 2010

Vamos tentar diferente:

http://www.wbruno.com.br/scripts/valida_select.php

veja 'se aparece' o :

Escolha um assunto!

pois eu testei antes de postar, e funcionou sim.

Se não funcionar ai pra você, é alguma particularidade do teu navegador, qual você tá usando ?

LostSoul · Setembro 3, 2010

Vamos tentar diferente:

http://www.wbruno.com.br/scripts/valida_select.php

veja 'se aparece' o :

Escolha um assunto!

pois eu testei antes de postar, e funcionou sim.

Se não funcionar ai pra você, é alguma particularidade do teu navegador, qual você tá usando ?

Poxa William realmente por esse link ae funcionou mesmo, aceite minhas desculpas, pode ser que seja meu navegador mesmo! É que estou no PC de onde eu trabalho, e meu navegador aqui é a droga do IE6. Vou fazer diferente agora, vou colocar o código JavaScript da validação do campo assunto separadamente dos outros.

William Bruno · Setembro 3, 2010

Não cara.

Não tem nada de php ai. É apenas javascript.

Tudo bem, funciona no ie6 sim.

Logo, não é problema do navegador.

Mas sim alguma coisa que você fez errada. Veja de novo o código que postei, e procure o seu erro.

Se tiver dúvidas, poste um link online da sua tentativa.

LostSoul · Setembro 3, 2010

Não cara.

Não tem nada de php ai. É apenas javascript.

Tudo bem, funciona no ie6 sim.

Logo, não é problema do navegador.

Mas sim alguma coisa que você fez errada. Veja de novo o código que postei, e procure o seu erro.

Se tiver dúvidas, poste um link online da sua tentativa.

Então por favor cara, me ajuda com esse FORM abaixo pois não sei mais o que fazer:

<html>
<head>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"src="js/jquery.validate.js" ></script>

<style type="text/css">
<!--
            * label { display: block; margin-top: 10px; }
            label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
            p { clear: both; }
            .submit { margin-top: 1em; }
            em { font-weight: bold; padding-right: 1em; vertical-align: top; }
-->
</style>

<script type="text/javascript">
$(document).ready(function() {
	$("#form_teste").validate({
		rules:{
		campoNome:{
			required: true, minlength: 2
			},
		campoEmail:{
			required: true, email: true
			},
		campoAssunto:{
			required: true
			},
		campoMensagem:{
			required: true, minlength: 2
			},
		messages:{
		campoNome:{
			required: "Digite o seu nome!",
			minlength: "O seu nome deve conter, no mínimo, 2 caracteres!"
			},
		campoEmail:{
			required: "Digite o seu e-mail!",
			email: "Digite um e-mail válido!"
			},
		campoAssunto:{
			required: "Escolha um assunto!"
			},
		campoMensagem:{
			required: "Digite a sua mensagem!",
			minlength: "A sua mensagem deve conter, no mínimo, 2 caracteres!"
			}
			}
		});
		});
</script>

</head>
<body>
<form method="post" action="processa.php" id="form_teste">

<label><b>Nome:</b><br>
<input name="campoNome" type="text" id="name" size="40"></label><br>
<label><b>E-mail:</b><br>
<input name="campoEmail" type="text" id="email" size="40"></label><br>
<label><b>Assunto:</b><br>
<select name="campoAssunto">
			<option value="">Escolha uma sugestão</option>
			<option value="Opcao1">Suporte</option>
			<option value="Opcao2">Sugestões</option>
			<option value="Opcao3">Vendas</option>
</select>
</label>
<br>
<label><b>Anexar arquivo:</b><br>
<input type="file" name="campoArquivo" size="25"></label><br>
<label><b>Mensagem:</b><br>
<textarea name="campoMensagem" cols="35" rows="5"></textarea></label><br>
<label><input type="submit" name="enviar" value="enviar" /></label>
</form>
</body>
</html>

William Bruno · Setembro 3, 2010

vááários erros de sintaxe.

veja:

<html>
<head>

	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.validate.js"></script>

<style type="text/css">
	* label { display: block; margin-top: 10px; font-weight: bold; }
	label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
	p { clear: both; }
	.submit { margin-top: 1em; }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

<script type="text/javascript">
$(document).ready(function(){
	$("#form_teste").validate({
		rules:{
			campoNome:{
				required: true, minlength: 2
			},
			campoEmail:{
				required: true, email: true
			},
			campoAssunto:{
				required: true
			},
			campoMensagem:{
				required: true, minlength: 2
			}
		},
		messages:{
			campoNome:{
				required: "Digite o seu nome!",
				minlength: "O seu nome deve conter, no mínimo, 2 caracteres!"
			},
			campoEmail:{
				required: "Digite o seu e-mail!",
				email: "Digite um e-mail válido!"
			},
				campoAssunto:{
				required: "Escolha um assunto!"
			},
			campoMensagem:{
				required: "Digite a sua mensagem!",
				minlength: "A sua mensagem deve conter, no mínimo, 2 caracteres!"
			}
		}
	});
});
</script>

</head>
<body>
<form method="post" action="processa.php" id="form_teste">

	<label>Nome: <br />
	<input name="campoNome" type="text" id="name" size="40"></label><br>
	<label>E-mail:<br />
	<input name="campoEmail" type="text" id="email" size="40"></label><br>
	<label>Assunto:<br />
		<select name="campoAssunto">
			<option value="">Escolha uma sugestão</option>
			<option value="Opcao1">Suporte</option>
			<option value="Opcao2">Sugestões</option>
			<option value="Opcao3">Vendas</option>
		</select>
	</label>
	<br>
	<label>Anexar arquivo:<br />
		<input type="file" name="campoArquivo" size="25"></label><br>
	<label>Mensagem:<br />
		<textarea name="campoMensagem" cols="35" rows="5"></textarea></label><br>
	<label><input type="submit" name="enviar" value="enviar" /></label>
</form>
</body>
</html>

apenas arrume as pastas ali... colocando o js/

indente melhor os teus códigos.

LostSoul · Setembro 3, 2010

Caraaaaaaa!!! Se você não moresse tão longe com certeza te pagaria uma caixa de cerveja!!! Valeu mesmo meu brother!!! Funcionou perfeitamente!!!

Me tira só mais uma dúvida! Como posso corrigir todo meu código HTML, tipo os erros de sintaxe! De uma maneira geral, existe algum programa?

William Bruno · Setembro 3, 2010

hehe, única coisa que não bebo é cerveja... mas se for uma caixa de soda, 1 vodka, eu aceito por sedex :P

validador w3c

http://validator.w3.org/

mas dos teus erros, o mais graves eram javascript...

apenas 'indentar corretamente' (ai você consegue ler o código mais fácil, e indentificar mais rápido erros)

Se bem, que o debug do Firefox é muito bom..

aperte

Ctrl + Shif + J

se tiver erros absurdos, ele vai te informar.

LostSoul · Setembro 3, 2010

Poxa meu brother! Que pena que não bebes cervejas! Mais quando tiveres por Aracajú/SE manda a ideia, pago a Vodka e a Soda kkkkkkkkkk! E ainda te apresento umas gatas!!! kkkkkkkkk

Valeu mesmo!

Abraço!

[RESOLVIDO]

Arquivado

[Resolvido] Validando caixa SELECT do FORM

Recommended Posts

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

LostSoul 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante