Ir para conteúdo
Entre para seguir isso  
Flavioh825

Validar dados de um formulário dinâmico.

Recommended Posts

Olá pessoal, sou novo aqui e já vou postando uma dúvida.

 

Estou criando um sistema de controle de guia de remessas, nele eu cadastro até 15 itens de uma só vez no banco de dados. Para adicionar esses itens eu utilizo um formulário dinâmico que aparece ao clicar em um botão + para add. O problema é o seguinte.

Preciso validar os dados sem atualizar a página, o jquery validate não funciona no form e o javascript puro também não funciona, a validação com o php funciona o problema é que com ela a página atualiza apagando assim todos os 15 dados digitados pelo usuário, forçando-o a digitar tudo novamente. Minha dúvida é como posso fazer pra validar esses forms de modo que seja amigável ao usuário para que ele não tenha que digitar tudo novamente caso ocorra algum erro (campos nulos ou algo do tipo).

 

Como posso fazer isso? Tem uma forma melhor?

 

Desde já, agradeço!!

 

Utilizo o codeigniter com bootstrap. segue o código script que uso no momento.

 <script type="text/javascript">	$(document).ready(function() {	    var cont = $("fieldset").length;		$("#btnAddopcao").click(function() {		if (cont > 15) {		   alert('O limite de itens da guia de remessa foi atingido!');		} else {		   var novaopcao = $("#opcao").clone();		   $(".opcaoContent").append(novaopcao.show());		}	        });	}); </script><script type="text/javascript">	$(document).click(function() {	    var n = $("fieldset").length;		if (n > 1) {		   document.getElementById('#itensRemessa').className = "btn";		   var n = $("fieldset").length;		} else {		   document.getElementById('#itensRemessa').className = "btn disabled";		}	})	.trigger("click");</script>

<form action="{ACAOFORM}" method="post" class="form form-horizontal" name="form_processo" id="form_processo"><div class="fix">     <a href="javascript:void(0);" class="btn btn-primary" action="{ACAOFORM}" method="post" id="btnAddopcao"><i class="glyphicon glyphicon-plus-sign"></i></a>     <span id="qtd" class="badge badge-info"></span></div>	<div id="opcao" style="display: none;">		<div class="col-lg-4 col-md-4">		<div class="col-lg-8 col-md-8">	        <fieldset>		<input type="text" class="form-control" id="protocolo" name="protocolo[]" value="" placeholder="Protocolo" autofocus/>		<input type="text" class="form-control" id="assunto" name="assunto[]" value="" placeholder="Assunto"/>		<select class='form-control' id="tipotransacao" name='tipotransacao[]'>		<option value=''>Transação</option>                <option value='RECOLHIMENTO'>Recolhimento</option>	        <option value='TRANSFERENCIA'>Transferencia</option>                <option value='DEVOLÇÃO'>Devolução</option>		</select>		</div>		<div class="col-lg-1 col-md-1">	        <a href="javascript:void(0);" class="btn btn-remover" onclick="$(this).closest('#opcao').remove();" ><i class="glyphicon glyphicon-minus-sign"></i></a>		</div>		</fieldset>		</div>		</div>		<div class="opcaoContent"></div>		<br />		<div class="col-lg-12 col-md-12">		<div class="well">		     <button type="submit" id="#itensRemessa" class="btn disabled">				<i class="glyphicon glyphicon-floppy-saved"></i> Salvar Guia de Remessa		     </button>		</div>		</div></form>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você não deve estar utilizando o jquery validate ou javascript corretamento , um exemplo de jquery simples..

$("#form1").submit(function () {
	if ( $("#campo1").val().length > 5 )
		return;
	else{
		alert("porfavor preenchar denovo");
		return false;
	} 
});
Editado por LukasWolf7

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ou um modo mais "grosseiro" ao clicar no botão submit e pega os campos input, no caso abaixo trato uns checkbox (muitos inputs) e verifico a data e hora:

<script language="javascript" type="text/javascript">
var checkForm = function(form){
    var inputs = form.getElementsByTagName('input');
	var dataIni= new Date(formIndex.dataIni.value); 
	var dataFin= new Date(formIndex.dataFin.value);
	var horaIni= formIndex.horaIni.value; 
	var horaFin= formIndex.horaFin.value;
	var diasEmMilisegundos = 1000*60*60*24*32;
	//1000  Milisegundos
	//60 Segundos
	//60 Minutos
	//24 Horas
	//30 Dias <-- Aqui vocÊ coloca quandos dias quer
	
	
		for(var i = 0, l = inputs.length; i < l; i++){
			var input = inputs[i];
			if(input.type == "checkbox" && input.checked){
				if(dataIni != "" && dataFin != ""){
					if( dataIni.getTime()+diasEmMilisegundos >= dataFin.getTime() ){
						if(horaIni.length > 3 && horaFin.length > 3){
							if(horaFin >= horaIni) {
							return true;	
							} else {
								alert('Hora Inicial maior que Hora Final');
								return false;
							}           			
						} else {
							alert("Campo(s) Hora Ini/Fin vazio(s)");
							return false;	
						} 
					} else {
						alert("Limite de 30 dias");
						return false;
					}	
				} else {
					alert("Campo(s) Data Ini/Fin vazio(s)");
					return false;	
				} 
			}
		}
		alert("Campos obrigat\u00f3rios: Data/hora e pelo menos um item");
		return false;
	
}; 



<form name="formIndex" action="Servlet" method="post" onsubmit="return checkForm(this);">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fala Galera muito obrigado pelas respostas... estive fora um tempo e estou retornando pra agradecer a vocês!

 

Resolvi só com o php atualizando a página com os últimos registros inseridos na tabela. Mais simples no final das contas e atende melhor as necessidades aqui.

 

Mas vlw!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.