jQuery.validate无法通过Ajax处理帖子

Question

I'm little confused. I build simple form:

<form id="simple-contact">
<input type="text" id="client-name" name="clientname" class="textF" placeholder="Imię i Nazwisko*"/>
<input type="text" id="client-mail" name="clientmail" class="emailF" placeholder="E-mail*"/>
<input type="text" id="client-phone" name="clientphone" class="textF" placeholder="Nr telefonu"/>
<textarea id="client-massege" name="clientmassage" class="textareaF" placeholder="Wpisz wiadomość"></textarea>
<input type="submit" id="client-wysylka" name="clientwysylka" value="Wyślij" class="btnF"/>
</form>

I use jQuery validation plugin and want submit form via ajax. So I wrote this part of code:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.validate.min.js"></script>    
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/additional-methods.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#simple-contact').validate({
     onfocusout: function (element) {
     $(element).valid();
     },
      rules: {
   clientname: "required",  
   clientmail: {                
      required: true,
      email: true
    },
      clientphone: {
      required: true,
      matches: "[0-9]",
      minlength:9,
      maxlength:9
    },
    clientmassage: {
          required: true
    }

},
    submitHandler: function(form) {
        request = $.ajax({
            type: "POST",
            cache: false,
            url: "http://www.wytworniaprojektu.eu/formularze/form-simple-wrapp-send.php",
            data: $(form).serialize(),
            timeout: 3000
            success: function() {alert('Done');},
            error: function() {alert('Error');}
    });

    return false;
    },
    messages: {
    clientname: "Podaj Imię i Nazwisko",
    clientmail: {
      required: 'Pole e-mail jest wymagane',
      email: 'To nie jest prawidłowy adres e-mail'
    },
    clientphone: {
      required: 'Musisz podać nr telefonu',
      matches: 'Numer musi zawierać 9 cyfr'
    },
    clientmassage: 'Wpisz wiadomość',
    },
    errorPlacement: function(error, element) {
    if(element.is(":radio") || element.is(":checkbox")) {
    error.appendTo(element.parent());
    }
    else {
    error.insertAfter(element);
    }
    },
   });
   });

I've also tried this solution https://stackoverflow.com/a/17627502/2801980

but still not working, i mean form not sending (guess not take code from ajax url (action path). I can't see any alert and submission redirect me to same page.

See in action http://www.wytworniaprojektu.eu/#contact-form

Answer 1

Well what happens here is your ajax works. It sends the request and receives the response. I guess the way you have it set up right now is when you receive ANY response you redirect. Problem is the response is an error.

What you should probably probably make an ajax request to your server-side, the server-side should to some task, and based on that task return response back to javascript.

So lets say on your server-side you save the info to the database. If everything goes right you should return JSON for example { status : 1 }. If there was any errors on the server side you might want to catch them and return {status : 0}.

Now in your javascript

success: function(data) { 
   if(data.status) { 
         // do the redirect 
   } else { 
         // handle error 
   }
}