Submit de formulário - validação em jQuery e PHP

[Red FeniX 4]

Boa tarde,

 

Faz muito tempo que não passo por aqui, porém estou com uma dúvida e preciso da ajuda de vocês. Na verdade, essa é uma dúvida bem antiga, porém sempre fugia dela e fazia da forma mais rudimentar, mas agora estou numa sinuca de bico e não tenho alternativa.

 

Bom, minha dúvida é bem simples na verdade: como executar uma função jQuery antes de dar o submit no formulário e, caso esta retorne TRUE proceder com o submit e, em caso de FALSE, parar o submit e executar outra função.

 

Ou seja, tenho um formulário HTML e preciso validá-lo. Contudo, não quero fazer da forma tradicional, enviando o formulário a uma página, esperar ela carregar e validar o form e depois retornar com sucesso ou falha. Quero fazer isso de forma dinâmica, sem sair/recarregar a página do form.

 

Em resumo, teria uma função "validacao()" que validaria o form quando o botão 'submit' fosse pressionado. Antes de enviar o formulário para a página destinada em 'action', gostaria de executar a função. Se ela validasse o formulário, através de de um $.ajax({ url, method, data, success}) enviando os dados para uma página PHP, e retornasse TRUE, o form seria enviado para o 'action'. Em caso de FALSE, nada aconteceria e executaria uma função para exibir os erros retornados pelo PHP e $.ajax.

 

Alguém poderia me dar uma luz?

 

Obrigado!

[Lucas Guima 164]

O formulário tem um evento jQuery chamado submit(), o qual serve para o que você precisa.

 

Dê uma olhada: http://jsfiddle.net/LucasGuima/dsLLw/

[Danilo Soncini 15]

Se vai utilizar a função via Ajax poderia utilizar apenas o Atributo onsubmit="return false;" no form que ele não iria utilizar o método normal de submit

 

Você poderia ainda adicionar a função para validar os campos:

 

<form method="GET" onsubmit="return validaForm();" >
<input type="text" name="nome">
<button> enviar</button>
</form>

<script>
function validaForm()
{
return false;
}
</script>

 

Caso validaForm() Retorne "true" ele da o submit, caso "false" não faz submit os dados.

[Red FeniX 4]

Dae galera, eu vou mostrar meus códigos aqui, pra vocês olharem:

 

index.php

<form id="form" method="POST" action="#">
       <div class="linha">
           <div class="label">
               E-mail de contato:
           </div>
           <div class="campo">
               <input name="email_contato" class="email" type="text" value="<?php echo $cfg_e_contato; ?>"/>


           </div>
       </div>
       <div class="linha-clara">
           <div class="label">
               E-mail de propostas e imóveis:
           </div>
           <div class="campo">
               <input name="email_prop" class="email" type="text" value="<?php echo $cfg_e_prop; ?>" />
               <br />

           </div>
       </div>
       <div class="botoes">
           <div style="width: 135px; float: left; margin-right: 15px;">
               <input type="button" class="salvar" name="salvar" id="salvar_cfgs_portal" value="n" />
           </div>
           <div style="width: 135px; float: left; margin-left: 15px;">
               <input type="button" class="cancelar" name="cancel" value="n" />
           </div>
       </div>
</form>

 

main.js

function validacao(form) {

   var error = '0';
   var val   = '';
   var tp    = '';

   $('.email').each(function() {

       val = $(this).val();
       tp  = '2';

       $.ajax({

           type: "post",
           url: "core/validacao.php",
           data: {"val" : val, "tp" : tp},
           success: function(data) {

               if(data == "1") {

                   if(error == '0') {

                       error = '0';
                   }
                   else {

                       error = '1';
                   }
               }
               else {

                   $(this).append('<span class="error">'+data+'</span>');

                   if(error == '0') {

                       error = '1';
                   }
                   else {

                       error = '1';
                   }
               }                                
           },
       });
   });

   if(error == '0') {

       return true;
   }
   else {

       return false;
   }
}


function SubForm() {

   $('#salvar_cfgs_portal').click(function(){
       $.blockUI({ message: $('#verificando'), css: { width: '400px', padding: '10px'} });
       setTimeout(function() {
           $.unblockUI({
               onUnblock: function(){

                   if(!validacao('#form')) {

                       $.blockUI({ message: $('#falha'), css: { width: '400px', padding: '10px'} });
                       setTimeout($.unblockUI, 1800);

                       return false;
                   }
                   else {

                       $('#form').submit();
                   }
               }
           });
       }, 2000);                           
   });


}

 

core/validacao.php

<?php

include ("../../classes/principal.php");


$val    = $cl->antiSQL($_POST["val"]);
$tp     = $cl->antiSQL($_POST["tp"]);


$error = "0";

// CAMPO OBRIGATÓRIO
if($tp == "1") {

   if(!$cl->cObrigatorio($val)) {

       $resp = "Campo obrigatório";
       $error = "1";
   }
}

// E-MAIL OBRIGATÓRIO
if($tp == "2") {

   if($cl->cObrigatorio($val)) {

       if($cl->ValEspeciais($val, "email")) {

           $error = ($error = '0') ? '0' : '1';
       }
       else {

           $resp = "E-mail inválido. Por favor, utilize o formato email@provedor.com";
           $error = "1";
       }

   }
   else {
       $resp = "Campo obrigatório";
       $error = "1";
   }
}

// TELEFONE OBRIGATÓRIO
if($tp == "3") {
   if($cl->cObrigatorio($val)) {

       if(!$cl->ValEspeciais($val, "tel")) {

           $resp = "Telefone inválido. Por favor, utilize apenas números";
           $error = "1";
       }

   }
   else {
       $resp = "Campo obrigatório";
       $error = "1";
   }
}

// URL OBRIGATÓRIO
if($tp == "4") {
   if($cl->cObrigatorio($val)) {

       if(!$cl->ValURL($val)) {

           $resp = "Endereço inválido. Por favor, utilize o formato http://www.site.com";
           $error = "1";
       }

   }
   else {
       $resp = "Campo obrigatório";
       $error = "1";
   }
}

// NUMÉRICO OBRIGATÓRIO
if($tp == "5") {
   if($cl->cObrigatorio($val)) {

       if(!$cl->VerCaracteres($val, "numeros", 0)) {

           $resp = "Por favor, utilize apenas números";
           $error = "1";
       }

   }
   else {
       $resp = "Campo obrigatório";
       $error = "1";
   }
}


if($error == "1") {
   echo $resp;
}
else {
   echo "1";
}
?>

 

Então, o que está errado?

 

Abração!