Geek Answers Handbook

How to submit a form using Ajax and jQuery validation?

I am trying to send a from Ajax and use the request validation plugin to validate it. I am writing the code below:

<html>
<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="jquery.validate.js"></script>
</head>

<body>
    <form id="myForm">
        <input type="text" name="name" />
        <br/>
        <input type="text" name="school" />
        <br/>
        <input type="submit" />
    </form>
    <div id="result"></div>

<script>        
    $(document).ready(function () {

    $("#myForm").validate({ 
        onkeyup: false,
        rules: {
            name: {
                required: true,
                minlength: 5
            },
            school: {
                required: true,
                minlength: 5
            }
        }
    });

    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();

    $("#myForm").ajaxForm({
        url: "add_admin.php",
        type: "post",
        data: values,
        beforeSubmit: function () {
            return $("#myForm").valid();
        },
        success: function(){
            //alert("success");
            $("#result").html('Submitted successfully');
        },
        error:function(){
//            alert("failure");
            $("#result").html('There is error while submit');
        }
    });

});

</script>
</body>

but it didn’t work. Have I made any mistake here? Can someone help me? text little text text text text text

+4
source share
2 answers

Update: use the following parameter as it works in all circumstances giving you ajax power

Jsfiddle here

Check the NET tab in Inspect or Firebug

   $("#myForm").validate({ 
    rules: {           
        school: {
            required: true,
            minlength: 5
        }
    },
    submitHandler: function(form) {
        //Your code for AJAX starts       

        jQuery.ajax({
                     url:'ajax.php',
                     type: "post",
                     data: $(form).serialize(),
                    success: function(){
                        //alert("success");
                        $("#result").html('Submitted successfully');
                    },
                    error:function(){
            //            alert("failure");
                        $("#result").html('There is error while submit');
                    }                
        //Your code for AJAX Ends
    });       
  }

});

Bottomline -> Use jQuery to validate your own mechansim submit form via AJAX inside submitHandler .

+1
source

...

<form id="myForm">
    <input type="text" name="name" />
    <br />
    <input type="text" name="school" />
    <br />
    <input type="submit" id="BTNTest" />
</form>
<div id="result"></div>

<script>
    $(document).ready(function () {

        $("#myForm").validate({
            onkeyup: false,
            rules: {
                name: {
                    required: true,
                    minlength: 5
                },
                school: {
                    required: true,
                    minlength: 5
                }
            }
        });

        event.preventDefault();
        $("#result").html('');
        var values = $(this).serialize();

        $(document).on('click', '#BTNTest', function () {
            $.ajax({
                url: "add_admin.php",
                type: "post",
                data: values,
                beforeSubmit: function () {
                    return $("#myForm").valid();
                },
                success: function () {
                    //alert("success");
                    $("#result").html('Submitted successfully');
                },
                error: function () {
                    //            alert("failure");
                    $("#result").html('There is error while submit');
                }
            });
        });
    });

</script>
-1

More articles:


All Articles