How to submit and validate a form via ajax

Question

Please I am trying to simultaneously submit and validate my form to my database through the use of Ajax, but it is not working for me. Here is my jquery

$(document).ready(function(){
       $(".button").click(function(){
             $("#myform").validate();

            //Ajax to process the form
       $.ajax({
           type: "POST",
           url: "process.php",
           data: { firstname: $("#firstname").val()},
           success: function(){
                               $('#message').html(data);
                               }
               });
          return false;
       });
      });

The problem is when I submit the form,the Ajax form submit to itself. Please What is the right way to use the jquery validate and $.ajax together?

tymeJV · Accepted Answer · 2013-07-08 13:23:22Z

5

Pass data as a parameter in your success function:

success: function(data){

Your success function won't do anything because you haven't defined data

answered Jul 8, 2013 at 13:23

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nono · Accepted Answer · 2013-07-08 14:51:08Z

3

Try this (working for me as expected):

HTML Form:

<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>    
// JQuery Script to submit Form
$(document).ready(function () {
    $("#commentForm").validate({
        submitHandler : function () {
            // your function if, validate is success
            $.ajax({
                type : "POST",
                url : "process.php",
                data : $('#commentForm').serialize(),
                success : function (data) {
                    $('#message').html(data);
                }
            });
        }
    });
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>        
        <p>
            <label for="cname">Name (required, at least 2 characters)</label>
            <input id="cname" name="name" minlength="2" type="text" required />
            <p>
                <label for="cemail">E-Mail (required)</label>
                <input id="cemail" type="email" name="email" required />
            </p>
            <p>
                <label for="curl">URL (optional)</label>
                <input id="curl" type="url" name="url" />
            </p>
            <p>
                <label for="ccomment">Your comment (required)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit" />
            </p>
    </fieldset>
</form>

<div id="message"></div>

PHP Code:

<?php
echo $_POST['email'];
?>

edited Jul 8, 2013 at 14:51

answered Jul 8, 2013 at 13:31

Nono

7,4124 gold badges42 silver badges41 bronze badges

7 Comments

Duahs Over a year ago

it just validates the form but cannot submit the form

Nono Over a year ago

@user2418765: check my new complete code and try to find what is wrong in your code.

Duahs Over a year ago

thanks once more.I have really spend so many hours just to get this done

Duahs Over a year ago

PLEASE I HAVE BEEN BANNED FROM THIS SITE, CAN YOU PLEASE ASSIST ME OUT OF THE BAN..THANKS

Nono Over a year ago

@Duahs: I didn't get you, what are you trying to ask..?

|

Sundar · Accepted Answer · 2016-09-13 05:14:10Z

3

You forget to pass the response

$(document).ready(function() {
    $(".button").click(function() {

        //check the validation like this
        if ($("#myform").valid()) {
            //Ajax to process the form
            $.ajax({
                type: "POST",
                url: "process.php",
                data: {
                    firstname: $("#firstname").val()
                },

                //you forget to passs the response
                success: function(response) {
                    $('#message').html(response);
                }
            });
            return false;
        }
    });
});

edited Sep 13, 2016 at 5:14

answered Jul 8, 2013 at 13:25

Sundar

4,6606 gold badges40 silver badges63 bronze badges

5 Comments

Sundar Over a year ago

$("#myform").validate() this line is updated and add full http url url: "process.php", check the validate rules also, if everything is fine then it'll submit

Duahs Over a year ago

,this only validates the form but cannot submit the data

Sundar Over a year ago

stackoverflow.com/questions/7675053/… try this submit handler

Duahs Over a year ago

sorry,im facing the same problem

Duahs Over a year ago

hi Sundar your answer is working, but you would double click on the submit button before it could submit.

mr. Pavlikov · Accepted Answer · 2013-07-08 13:28:04Z

0

First of all, why would you submit form if validation is not passed? Try this, if validate really validates:

$(function(){
    $(".button").click(function(){
        var myform = $("#myform");
        if (myform.validate()) {        
            $.post("process.php", myform.serialize(), function(data){
                $('#message').html(data);
            });            
        }
        return false;
    });     
});

answered Jul 8, 2013 at 13:28

mr. Pavlikov

1,0126 silver badges7 bronze badges

1 Comment

Duahs Over a year ago

the validation works but the submission does not work,it only submits to itself.

Collectives™ on Stack Overflow

How to submit and validate a form via ajax

4 Answers 4

Comments

7 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related