JQuery form submit do not validate fields

Question

I have used Parsley.js for form validation. I am submitting via a JQuery, so the page will not get refreshed. However when I am using the Javascript code for for submitting, I noticed the form validations are not taking place anymore. Previously, when I was not using Javascript, the form validation has taken place.

This is my html code and I used parsley.js here .

<form id="contact-form" action="xxx.php" method="POST" data-parsley-validate>
                        <div class="contact-form-loader"></div>
                        <fieldset>

                            <label class="name">
                                <input type="text" id="nme" name="name" placeholder="Name:" value=""
                                       data-constraints="@Required @JustLetters" data-required="true"/>                                
                            </label>

                            <label class="email">
                                <input type="text" name="email" placeholder="Email:" value=""
                                       data-constraints="@Required @Email" data-parsley-trigger="change" data-required="true"/>
                            </label>

                            <label class="phone">
                                <input type="text" name="phone" placeholder="Phone:" value=""
                                       data-constraints="@JustNumbers" data-required="true"/>
                            </label>


                            <label class="message">
                                <textarea name="message"
                                          data-parsley-trigger="keyup" placeholder="Message :" data-parsley-minlength="15" 
                                          data-parsley-validation-threshold="10" data-required="true"
                                          data-parsley-minlength-message = "You need to enter at least a 20 character comment ! ..">
                                </textarea>
                            </label>

                            <div class="btn-wrapper">
                                <a class="btn_2 text_3 color_7" href="#" data-type="reset">Clear</a>
                               <!-- <a class="btn_2 text_3 color_7" href="#" data-type="submit">Send</a>-->
                                <input id="sub" type="submit" name="submit" class="btn_2 text_3 color_7" value="Send"/>
                             </div>
                        </fieldset>
                        <div class="modal fade response-message">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Modal title</h4>
                                    </div>
                                    <div class="modal-body">
                                        You message has been sent! We will be in touch soon.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

And this is my java script ,

<script type="text/javascript">

    $("#sub").click(function() {        

    var url = "xxx.php";

        $.ajax({
           type: "POST",
           url: url,
           data: $("#contact-form").serialize(),
           success: function(data)
           {
               alert("Message Sent !");
           }
         });  

    return false; 
    });

</script>

And this is the xxx.php I've used to send e-mails .(This is worked in my server)

<?php

            $name=$_POST['name'];
            $email=$_POST['email'];
            $phone=$_POST['phone']; 
            $message=$_POST['message'];

            $to='[email protected]';
            $subject='Contact Form Message';
            $headers  = 'MIME-Version: 1.0' . "\r\n";
            $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
            $headers .='From : '.$email."r\n".
                       'Reply-To : '.$email."r\n".
                       'X-Mailer: PHP/' . phpversion();     
            $sent=mail($to,$subject,$message,$headers);
            if(!$sent){
                echo "There are problems in sending mails  <br>";
            }else{
                echo "End mail sending";            
            }       
            echo "Sent mail";


   ?>

Does anyone have a possible idea ?

Answer 1

The correct way to use ajax to submit a form is to do so on('submit', ...), not on click.

Also, make sure that you bind your submit event after parsley does.

You could also use parsley and bind form:success instead, if you prefer:

$('#contact-form').parsley().on('form:success', ...)