Olá galera, estou de volta para mostrar uma maneira fácil e prática de validar seus forms com jQuery, vamos direto ao Código e depois explicamos rapidamente...
Bom é bem simples, este é o código javascript que criei para validar meus fomulários.
Carrego este arquivo em todas as páginas que tiverem formulário através do código "<script src="validacao.js"></script>".
Cada formulário fica em pastas separadas porém todas as pastas contém além do formulário também este arquivo de validação, que basicamente só terá de diferente dos demais o nome dos campos dentro do "switch" e suas respectivas mensagens de validação.
Este script, busca todos os inputs, textarea, select, checkbox, etc da página, e os validam, mostrando um alert com uma mensagem específica para cada campo.
Para os elementos escondidos "hidden", ou para elementos desativados "disabled","readonly", basta por para eles id=":null", para serem ignorados pela validação.
Há também o código dos eventos para botões do form. Para chamar a validação basta inserir para o botão Gravar id="Gravar", podendo ser este até do tipo "submit", pois há a prevenção do evento padrão.
Se houver um botão fechar, este irá fechar a página, apenas informando o id="Fechar". Útil para formulários em janelas "modais".
Para janelas modais, também há o evento para fechar a janela na tecla Esc após confirmação.
Bom galera, espero que tenham gostado.
Até a próxima.
<script type="text/javascript">
$(function(){
// Valida os dados do formulario
function Validacao(){
try {
btnGravar(true);
var msg=null, go=true;
$(':input[type!=button][id!=":null"]').each(function(i,e){
var $e = $(e);
if($e.attr('type')=='hidden'&&($e.attr('rel')!='hidden'))
return;
switch($e.attr('name')) {
case 'nome': msg = 'Preencha o campo Nome!!!'; break;
case 'telefone': msg = 'Preencha o campo Telefone!!!'; break;
case 'endereco': msg = 'Preencha o campo Endereço!!!'; break;
}
if($.trim($e.val())== "") {
alert(msg);
if($e.attr('type')!='hidden')
$e.focus();
btnGravar(false);
go=false;
return false;
}
});
if(go) {
$('input[name=btnAcao]').val("gravar");
$('form:first').submit();
}
} catch(e) { try{ console.log(e.message) } catch(e){} }
}
// Adiciona evento de validação no botão Gravar
$('#Gravar').click(function(e){
e.preventDefault();
Validacao();
});
// Adiciona evento Fechar Tela no botão Fechar
$('#Fechar').click(function(){ window.close(); });
// Altera foco para a primeira entrada de Texto não desativada
$('input:not(:disabled):first').focus();
// Fecha Janela com click do Esc
$(document).keydown(function(ev){
var e=ev||window.event, kp=e.keycode||e.which||null;
if(kp==27)
if(confirm('Deseja fechar a janela?'))
window.close();
});
});
</script>
Bom é bem simples, este é o código javascript que criei para validar meus fomulários.
Carrego este arquivo em todas as páginas que tiverem formulário através do código "<script src="validacao.js"></script>".
Cada formulário fica em pastas separadas porém todas as pastas contém além do formulário também este arquivo de validação, que basicamente só terá de diferente dos demais o nome dos campos dentro do "switch" e suas respectivas mensagens de validação.
Este script, busca todos os inputs, textarea, select, checkbox, etc da página, e os validam, mostrando um alert com uma mensagem específica para cada campo.
Para os elementos escondidos "hidden", ou para elementos desativados "disabled","readonly", basta por para eles id=":null", para serem ignorados pela validação.
Há também o código dos eventos para botões do form. Para chamar a validação basta inserir para o botão Gravar id="Gravar", podendo ser este até do tipo "submit", pois há a prevenção do evento padrão.
Se houver um botão fechar, este irá fechar a página, apenas informando o id="Fechar". Útil para formulários em janelas "modais".
Para janelas modais, também há o evento para fechar a janela na tecla Esc após confirmação.
Bom galera, espero que tenham gostado.
Até a próxima.
Nenhum comentário:
Postar um comentário