como validar dados de um formulário dinâmico?
08/10/2014
0
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 +adicionar. 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.
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 +adicionar. 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="" 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="" 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>
Flávio Henrique
Curtir tópico
+ 0
Responder
Post mais votado
23/10/2014
Olá Flavio, não sei se já resolveu seu problema mas uma solução seria utiliza HTML5. Você pode utilizar required="required" no seu formulário.
Segue alguns Exemplos
Apenas letras
Apenas números
Data
Hora
Campos genéricos de texto
Telefone
Email
Segue alguns Exemplos
Apenas letras
<input type="text" required="required" name="text" pattern="[a-z\s]+$" />
Apenas números
<input type="text" required="required" name="numbers" pattern="[0-9]+$" />
Data
<input type="date" required="required" maxlength="10" name="date" pattern="[0-9]\/[0-9]\/[0-9]$" min="2012-01-01" max="2014-02-18" />
Hora
<input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]:[0-9] [0-9]$" />
Campos genéricos de texto
<input type="text" required="required" name="name" />
Telefone
<input type="tel" required="required" maxlength="15" name="phone" pattern="\([0-9]\) [0-9]{4,6}-[0-9]{3,4}$" /><input type="email" required="required" class="input-text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />Fernando Blomer
Responder
Mais Posts
23/10/2014
Flávio Henrique
Já resolvi sim Fernando!
Mas muito obrigado pela excelente resposta!
Mas muito obrigado pela excelente resposta!
Responder
23/10/2014
Flávio Henrique
Kra é que no fim das contas acabei usando o jquery validate em um form não dinâmico, dando entrada dos dados e atualizando uma tabela abaixo com os novos dados para serem excluídos direto no banco de dados. Pra se adequar a forma de trabalho do pessoal aqui. Ficou até melhor.
Obrigado!
Obrigado!
Responder
Clique aqui para fazer login e interagir na Comunidade :)
