Validar formulario com o jQuery Validate e submeter por Ajax com jQuer

[Eduardo Pizza 0]

Boa tarde a todos,

 

Estou tentando validar um formulario com o plugin 'jquery.validate' e enviar posteriormente

por ajax utilizando a função 'ajaxSubmit' do 'jQuery Form Plugin'.

 

Fiz tudo conforme as instruções que encontrei, utilizei o método 'submitHandler' para forçar a submeter por ajax,

mas não funciona, o formulário é enviado normalmente sem Ajax.

 

A validação funciona normal.

 

Alguém sabe o que pode estar errado?

 

codigos:

 

 

html:

 

<form id="formulario" method="post" action="cadastro_processa.php">

(Aqui o formulario)   

<input id="botao-enviar" class="botoes-form" type="submit" name="campo-enviar" value="Enviar">  

</form>

 

 

 

 

javascript:

$(document).ready(function(){ 


$("#formulario").validate({


showErrors: function(errorMap, errorList) { alert(errorList[0].message); } ,
onfocusout: false,
onkeyup: false,
onclick: false,
focusInvalid: false,



  rules: {


    campoTel: {
    required: true,
 notEquals: 'xxxx-xxxx'
    },

    campoEmail: {
 notEquals: 'Digite o e-mail de contato da empresa',
 email: true
    },

    campoRua: {
    required: true,
 notEquals: 'Digite o nome da rua'
    },

    campoNumero: {
    required: true,
 notEquals: "Digite o Nº",
    }

  },


  messages: {


    campoTel: {
    required: "É necessário digitar o telefone",
 notEquals: "É necessário digitar o telefone"
    },

    campoEmail: {
 notEquals: "É necessário digitar o e-mail",
 email:"O formato de e-mail deve estar incorreto"
    },

    campoRua: {
    required: "É necessário digitar o nome da rua",
 notEquals: "É necessário digitar o nome da rua"
    },

    campoNumero: {
    required: "É necessário digitar o Nº",
 notEquals: "É necessário digitar o Nº"
    }

  },



submitHandler: function(form) {


$(form).ajaxSubmit({

		   url:'cadastro_processa.php',
		   type: 'post',
		   dataType: 'html',
		   success: function(retorno) {
		   $('#contem-cadastro').html(retorno); }
		   });
		   }


});


});	

 

 

 

Desde já muito obrigado

[William Bruno 1501]

faltou um return false; no submitHandler para impedir que o form seja enviado sem ajax

[Eduardo Pizza 0]

Ja experimentei colocar mas não funcionou também, sabe dizer o lugar certo no código?

[William Bruno 1501]

é desnecessário esse outro plugin. você pode usar apenas o validate, assim:

http://wbruno.com.br/blog/2011/03/21/validar-enviar-formulario-ajax-usando-jquery-validate/

[Thiago Duarte 23]

Bruno, to tendo um problema parecido com esse e meu formulario em ajax nao ta funcionando.

 

 jQuery('#enviar-contato').submit(function(){
    
    var _name = jQuery('#name').val();
    var _email = jQuery('#email').val();
    var _assunto = jQuery('#assunto').val();
    var _message = jQuery('#message').val();


    /* construindo url */


    var urlData = {
     "name"    : _name,
     "email"   : _email,
     "assunto" : _assunto,
     "message" : _message
   };


   jQuery.ajax({
      type: "post",
      url: "formcontato.php",
      data: urlData,           
      success: function( resultado ){
        console.log(resultado);
      }
  });


});

Ta assim, como faço pra validar?

[William Bruno 1501]

troca:

 jQuery('#enviar-contato').submit(function(){

por

 jQuery('#enviar-contato').submit(function(event){
    event.preventDefault();

e veja no console de erros se aparece algo.

[Thiago Duarte 23]

Aparece isso: Failed to load resource: net::ERR_EMPTY_RESPONSE

 

Continua sem funcionar, sabe o que deve ser?

 

 

já viu esse erro? sabe como resolver?