Formulário com campos obrigatório.

Tom Ferreira · Outubro 5, 2013

Olá pessoal preciso de ajuda para validar este formulário.

Na verdade, o que eu preciso é modificar este código Jquery pra ele apresentar a mensagem de erros nos campos obrigatórios igual a desse fomulário aqui: http://sistemadoaluno.com.br/matriculas/8.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://vcx.com.br/form/js/json.js"></script>
<script type="text/javascript" src="http://vcx.com.br/form/js/validacoes.js"></script>
<script type="text/javascript">
$(function(){
	$('#alerta-sucesso-formulario, #alerta-erro-login, #alerta-erro-senha').hide();
	$("#btn-cadastrar").on("click",function(){
		$('#alerta-sucesso-formulario, #alerta-erro-login').hide();
			if($('#senha').val().length < 3){
				$("#alerta-erro-senha").fadeIn('slow');
				return false;
			}
			else {
				$("#alerta-erro-senha").fadeOut('slow');
			var objDados = {
				nome  : $("#nome").val(),
				snome  : $("#snome").val(),
				email  : $("#email").val(),
				remail  : $("#remail").val(),
				login : $("#login").val(),
				senha : $("#senha").val()
			}
			objDados = JSON.stringify(objDados);
			$.ajax({
				type: "post",
				data: {dados: objDados},
				url: "verificar.php",
				success: function(dados){
					if(dados === 'true'){
						$("#alerta-erro-login").fadeIn('slow');
						$("#alerta-sucesso-formulario").fadeOut('slow');
					}
					else {
						$("#alerta-sucesso-formulario").fadeIn('slow');
						$("#alerta-erro-login").fadeOut('slow');
						// window.location = "restrito.php";
					}
				}
			})
			}
	})
})
</script>

O código do meu formulário é este:

   <form method="post" action="verificar.php">

Nome<input type="text" placeholder="nome" id="nome"/><br>

Sobrenome<input type="text" placeholder="snome" id="snome"/><br>
       
Email<input type="text" placeholder="email"  id="email"/><br>
<div id="alerta-erro-email">O e-mail é obrigatório.</div>

Login<input type="text" placeholder="login" id="login"/>
<div id="alerta-erro-login">O login já está sendo utilizado, por favor tente outro.</div>

Senha<input type="password" placeholder="senha" id="senha"/>
<div id="alerta-erro-senha">A senha precisa possuir mais de 3 caracteres.</div>

		<button id="btn-cadastrar" type="button">Cadastrar</button>

<div id="alerta-sucesso-formulario">Cadastro efetuado com sucesso.</div>

    </form>

OBS: lembrando que esse código Jquery já tá fazendo a validação do LOGIN no BD.

Agradeço a ajuda de todos! xd

Jaci Aparecido Salomao · Outubro 5, 2013

Cara , usa o jquery validation.js é pratico depois só implementar as mensagem

script type="text/javascript">
    $(document).ready(function(){
        $('.login').validate({
            rules:{
                usuario:{
                    required: true,
                    minlength: 6
                },
                senha: {
                    required: true,
                    rangelength:[4,12]
                },
             },
            messages:{
                usuario:{
                    required: "O campo nome é obrigatorio.",
                    minlength: "O campo nome deve conter no mínimo 6 caracteres."
                },
                senha: {
                    required: "O campo senha é obrigatorio.",
                    rangelength: "O campo senha deve conter entre 4 á 12 caracteres."
                },
             }
        });
    });
</script>

Tom Ferreira · Outubro 5, 2013

Cara , usa o jquery validation.js é pratico depois só implementar as mensagem

script type="text/javascript">
    $(document).ready(function(){
        $('.login').validate({
            rules:{
                usuario:{
                    required: true,
                    minlength: 6
                },
                senha: {
                    required: true,
                    rangelength:[4,12]
                },
             },
            messages:{
                usuario:{
                    required: "O campo nome é obrigatorio.",
                    minlength: "O campo nome deve conter no mínimo 6 caracteres."
                },
                senha: {
                    required: "O campo senha é obrigatorio.",
                    rangelength: "O campo senha deve conter entre 4 á 12 caracteres."
                },
             }
        });
    });
</script>

Mas e como eu faço a validação do campo login no servidor?

Jaci Aparecido Salomao · Outubro 5, 2013

Cara vc valida antes o preenchimento obrigatório após isso vc verifica se o login existe no servidor, eu uso o código abaixo, mas vc pode usar o seu mesmo se já estiver validano no banco se precisar te mando o código completo para vc enteder pq o meu ta orientado a objeto de uma forma diferente do que vc está fazendo.

case "incluir":
		echo "<h2>Cadastro de Usuários</h2>";
		if(isset($_POST['cadastrar'])):
			$user = new usuarios(array(
			'nome'=>$_POST['nome'],
			'email'=>$_POST['email'],
			'login'=>$_POST['login'],
			'senha'=>codificaSenha($_POST['nome']),
			'administrador'=>($_POST['adm']=='on')? 'S' : 'N',
			));
			if($user->existeRegistro('login',$_POST['login'])):
				printMSG('Este usuário já está cadastrado, escolha outra nome de usuario.','erro');
				$duplicado=TRUE;
			endif;
			if($user->existeRegistro('email',$_POST['email'])):
				printMSG('Este e-mail já está cadastrado, escolha outro e-mail.','erro');
				$duplicado=TRUE;
			endif;
			if($duplicado!=TRUE):
			$user->inserir($user);
			if($user->linhasafetadas==1):
				printMSG('Cadastro realizado com Sucesso. <a href="'.ADMURL.'?m=usuarios&t=listar">Exibir Cadastros</a>');
				unset($_POST);
				endif;
			endif;
		endif;
			
		?>

Tom Ferreira · Outubro 5, 2013

Cara vc valida antes o preenchimento obrigatório após isso vc verifica se o login existe no servidor, eu uso o código abaixo, mas vc pode usar o seu mesmo se já estiver validano no banco se precisar te mando o código completo para vc enteder pq o meu ta orientado a objeto de uma forma diferente do que vc está fazendo.

case "incluir":
		echo "<h2>Cadastro de Usuários</h2>";
		if(isset($_POST['cadastrar'])):
			$user = new usuarios(array(
			'nome'=>$_POST['nome'],
			'email'=>$_POST['email'],
			'login'=>$_POST['login'],
			'senha'=>codificaSenha($_POST['nome']),
			'administrador'=>($_POST['adm']=='on')? 'S' : 'N',
			));
			if($user->existeRegistro('login',$_POST['login'])):
				printMSG('Este usuário já está cadastrado, escolha outra nome de usuario.','erro');
				$duplicado=TRUE;
			endif;
			if($user->existeRegistro('email',$_POST['email'])):
				printMSG('Este e-mail já está cadastrado, escolha outro e-mail.','erro');
				$duplicado=TRUE;
			endif;
			if($duplicado!=TRUE):
			$user->inserir($user);
			if($user->linhasafetadas==1):
				printMSG('Cadastro realizado com Sucesso. <a href="'.ADMURL.'?m=usuarios&t=listar">Exibir Cadastros</a>');
				unset($_POST);
				endif;
			endif;
		endif;
			
		?>

Obrigado pela ajuda amigo, então me faz um favorzinho, manda o código completo pro meu email: tom # vcx ponto com ponto br

E eu te digo se deu certo, tá?

Jaci Aparecido Salomao · Outubro 5, 2013

Enviado

Douglas Matos · Outubro 5, 2013

Bom tenho este script que costumo usar em alguns sites funciona bem.

o script abaixo você pode colocar ante de começar o seu formulário ou dentro da tag <head>, pois se você tiver outros formulários poderá usa em outros também.

function verificaVazios(formulario) {

for(i=0; i < document.getElementById(formulario).length; i++ ) {

if(document.getElementById(formulario).title != "" && document.getElementById(formulario).title != undefined ) {

if(document.getElementById(formulario).value == ''){

if(i==61){

if(document.getElementById(formulario)[59].checked == true){

alert('Prencha o campo '+document.getElementById(formulario).title+' para continuar!'); document.getElementById(formulario).focus(); document.getElementById(formulario).style.backgroundColor='#fef6b4';

return false;

}

else {

alert('Prencha o campo '+document.getElementById(formulario).title+' para continuar!'); document.getElementById(formulario).focus(); document.getElementById(formulario).style.backgroundColor='#fef6b4';

return false;

}

return true;

}

</script>

Note que neste script também existe uma verificação caso precise que um campo seja de preenchimento obrigatório se o anterior foi preenchido, para funcionar é só colocar o índice do campo que você queira que seja verificado. Por padrão o índice começa em [0], ai é só contar os campos <input> até o campo necessário.

No seu formulário você precisa chamar a função no <form> que fica assim:

<form action="?acao=acao" method="post" name="formulario1" onSubmit="return verificaVazios('formulário1')" id="formulario1">

note que o onSubmit vai chamar a função verificaVazios que foi o que definimos no script dentro do parenteses vai o id do formulário que você quer que ele faça a verificação.

e agora para verificar seus campos você só precisa colocar title nos campos que você queria que seja obrigatório, mas lembre que neste title não pode ter espaços por exemplo:

title='Nome do cliente' desta forma o script não funciona, terá que fazer desta forma, title='Nome_do_cliente'.

Bom é isso espero ter ajudado.!!

Abraços :coolio:

Tom Ferreira · Outubro 5, 2013

Enviado

Recebi amigão, valew! Assim que puder eu te aviso do resultado... :joia:

Bom tenho este script que costumo usar em alguns sites funciona bem.

o script abaixo você pode colocar ante de começar o seu formulário ou dentro da tag <head>, pois se você tiver outros formulários poderá usa em outros também.

<script>

function verificaVazios(formulario) {

for(i=0; i < document.getElementById(formulario).length; i++ ) {

if(document.getElementById(formulario).title != "" && document.getElementById(formulario).title != undefined ) {

if(document.getElementById(formulario).value == ''){

if(i==61){

if(document.getElementById(formulario)[59].checked == true){

alert('Prencha o campo '+document.getElementById(formulario).title+' para continuar!'); document.getElementById(formulario).focus(); document.getElementById(formulario).style.backgroundColor='#fef6b4';

return false;

}

}

else {

alert('Prencha o campo '+document.getElementById(formulario).title+' para continuar!'); document.getElementById(formulario).focus(); document.getElementById(formulario).style.backgroundColor='#fef6b4';

return false;

}

}

}

}

return true;

}

</script>

Note que neste script também existe uma verificação caso precise que um campo seja de preenchimento obrigatório se o anterior foi preenchido, para funcionar é só colocar o índice do campo que você queira que seja verificado. Por padrão o índice começa em [0], ai é só contar os campos <input> até o campo necessário.

No seu formulário você precisa chamar a função no <form> que fica assim:

<form action="?acao=acao" method="post" name="formulario1" onSubmit="return verificaVazios('formulário1')" id="formulario1">

note que o onSubmit vai chamar a função verificaVazios que foi o que definimos no script dentro do parenteses vai o id do formulário que você quer que ele faça a verificação.

e agora para verificar seus campos você só precisa colocar title nos campos que você queria que seja obrigatório, mas lembre que neste title não pode ter espaços por exemplo:

title='Nome do cliente' desta forma o script não funciona, terá que fazer desta forma, title='Nome_do_cliente'.

Bom é isso espero ter ajudado.!!

Abraços :coolio:

Eu testei aqui e não funcionou no meu form, mas eu acho que é por causa do Jquery...

E me diz uma coisa o que vc quer é mais ou menos assim?

Douglas Matos · Outubro 5, 2013

Pode ser por causa do jQuery mesmo não me atentei a este detalhe, porém se você o jQuery não é usado no formulário você pode criar um arquivo .php colocar este script dentro e chamar com um include logo acima do formulário, já fiz isso e funcionou algumas vezes.

O que estou procurando é exatamente assim como você mostrou o banco até ja está criado mas não consigo cadastrar os submenus nele!

Williams Duarte · Outubro 5, 2013

Na minha humilde opinião é melhor você usar submitHandler, segue um tutorial básico:

http://wbruno.com.br/jquery/validar-enviar-formulario-ajax-usando-jquery-validate/

Neste exemplo você faz tudo junto, validação e o envia o form.

também da para retornar o resultado da consulta, se o usuário já existir.

utilizando $result->num_rows; em caso me mysqli ou mysql_num_rows() //mysql

e bom com conhecimento básico de css, você customiza os erros.

Dúvidas poste ae que vamos ajudando.

Tom Ferreira · Outubro 6, 2013

Na minha humilde opinião é melhor você usar submitHandler, segue um tutorial básico:

http://wbruno.com.br/jquery/validar-enviar-formulario-ajax-usando-jquery-validate/

Neste exemplo você faz tudo junto, validação e o envia o form.

também da para retornar o resultado da consulta, se o usuário já existir.

utilizando $result->num_rows; em caso me mysqli ou mysql_num_rows() //mysql

e bom com conhecimento básico de css, você customiza os erros.

Dúvidas poste ae que vamos ajudando.

@WDuarte valew pela ajuda.

Mas esse plugin funciona em navegadores antigos como o IE7?

Eu pergunto isso pq aqui na comunidade (favela, rsss vou aproveitar que hj tivemos uma aula sobre cidadania e a professora falou que nos tempos modernos tudo tem que ficar mais bonito pra ser aceito... e segundo ela a sociedade exige essa mudança, por exemplo: favela agora é comunidade; mendigo agora é morador de rua, bandido menor de idade é menor infrator, e assim por diante, rsrsrs gostei da aula ) onde eu vou usar esse projeto a maioria ainda usa (e acho que sempre usará) Windows XP e IE7 entendeu?

Williams Duarte · Outubro 6, 2013

Brow com certeza funciona desde do ieCa 6.0 +

Segue um aplicativo que uso muito para teste de versões, recomendo!

http://www.baixaki.com.br/download/ietester.htm

Tom Ferreira · Outubro 6, 2013

Brow com certeza funciona desde do ieCa 6.0 +

Segue um aplicativo que uso muito para teste de versões, recomendo!

http://www.baixaki.com.br/download/ietester.htm

Você é o meu herói!

Williams Duarte · Outubro 6, 2013

:D

Tom Ferreira · Outubro 8, 2013

Enviado

Eu estou estudando o código que o @Jaci Aparecido Salomao me enviou via e-mail e assim que eu tiver alguma novidade eu posto aqui.

Agradeço a ajuda de todos principalmente do @WDuarte que tem se empenhado em me incentivar a continuar nessa aprendizagem!

Ao contrário de alguns que acham que esse fórum não é de nada eu tenho certeza de que você são os melhores e eu tenho orgulho de poder estar aqui para aprender com todos vcs!

Wilson R. Degressi Míccoli · Outubro 8, 2013

Eu estou estudando o código que o @Jaci Aparecido Salomao me enviou via e-mail e assim que eu tiver alguma novidade eu posto aqui.

Agradeço a ajuda de todos principalmente do @WDuarte que tem se empenhado em me incentivar a continuar nessa aprendizagem!

Ao contrário de alguns que acham que esse fórum não é de nada eu tenho certeza de que você são os melhores e eu tenho orgulho de poder estar aqui para aprender com todos vcs!

Tom Ferreira, dá uma olhada lá naquele seu tópico dos cinquenta reais, postei agora cedo lá uma maneira de verificar o usuário no banco. Mesclando ela com o JQuery que o Jaci Aparecido Salomao postou (que gostei muito também) acredito que ficará funcional para o que você precisa.

Abraços

Tom Ferreira · Outubro 9, 2013

Tom Ferreira, dá uma olhada lá naquele seu tópico dos cinquenta reais, postei agora cedo lá uma maneira de verificar o usuário no banco. Mesclando ela com o JQuery que o Jaci Aparecido Salomao postou (que gostei muito também) acredito que ficará funcional para o que você precisa.

Abraços

Olá, Wilson R. Degressi Míccoli!

Eu ví sim a sua postagem e agradeço muito a sua ajuda, eu estou agora estudando os códigos que recebi e assim que tiver alguma dúvida ou novidade eu posto aqui. Valew!

Arquivado

Formulário com campos obrigatório.

Recommended Posts

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jaci Aparecido Salomao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jaci Aparecido Salomao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jaci Aparecido Salomao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Matos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Matos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wilson R. Degressi Míccoli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tom Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante