jQuery validate still redirects and opens form action path

Question

jQuery opens my form action instead of submitting the form without changing of page. What I'm working now is, I don't want the page to refresh when submitting the form because I want to integrate a progress bar when it's submitting/loading. Thanks for helping.

Here's my jQuery for validating and redirecting:

<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/jquery.validate.js"></script>
<script type="text/javascript" src="../javascript/jquery.form.js"></script>
<script type="text/javascript">
            $('document').ready(function(){
            $('#form').validate({
                rules:{
                    "fname":{
                        required:true,
                        maxlength:40
                    },
                    "lname":{
                        required:true,
                        maxlength:40
                    },
                    "mobile":{
                        required:true,
                        number: true
                    },
                    "address":{
                        required:true
                    },
                    "year":{
                        required:true
                    },
                    "month":{
                        required:true
                    },
                    "day":{
                        required:true
                    },
                    "files": {
                        accept:"jpg,png,jpeg,gif"
                    },
                    "vid": {
                        accept: "ogg|ogv|avi|mpe?g|mov|wmv|flv|mp4"
                    }},
                messages:{
                    "fname":{
                        required:"First Name is required"
                    },
                    "lname":{
                        required:"Last Name is required"
                    },
                    "mobile":{
                        required:"Mobile is required"
                    },
                    "address":{
                        required:"Address is required"
                    },
                    "files":{
                        accept: "Please choose a valid image file (jpg/png/jpeg/gif)"
                    },
                    "vid" : {
                        accept: "Please choose a valid video file (ogg/ogv/avi/mpg/mpeg/mov/flv/mp4)"
                    }}
                    submitHandler: function(form){
                        $(form).ajaxSubmit({
                            target: '#preview',
                            success: function() {
                            //$('form').find('input[type=text], select,input[type=file]').val('');

                        //  }
                        });
                        }
                    })
                });

Here's a part of my form:

<form id="form" name="form" action="submit_video.php" method="POST" enctype="multipart/form-data">

</form>

Answer 1

Quote OP:

"jQuery opens my form action instead of submitting the form without changing of page."

Syntax errors will block the plugin from functioning and the default form action will happen on submit.

---

Your code...

}}
submitHandler: function(form){
    $(form).ajaxSubmit({
        target: '#preview',
        success: function() {
        //$('form').find('input[type=text], select,input[type=file]').val('');
    //  }
    });
    }

You have at least two syntax errors inside your .validate() call.

1) Inside submitHandler, un-comment the closing brace, }, for the success callback function of ajaxSubmit().

See my comments...

submitHandler: function(form){
    $(form).ajaxSubmit({
        target: '#preview',
        success: function() {
            //$('form').find('input[type=text], select,input[type=file]').val('');
        } // <-- you need this brace to close the success callback function
    });   // <-- close ajaxSubmit
}         // <-- close submitHandler

2) You are also missing a comma to separate your messages option from your submitHandler callback. This syntax error will prevent the plugin from operating and your form will submit using the default form action.

}},  // <-- you need this comma here
submitHandler: function(form){

I strongly recommend that you properly format and indent your code so that syntax errors are easier to spot.

<script type="text/javascript">
    $('document').ready(function(){
        $('#form').validate({
            rules: {
                "fname": {
                    required: true,
                    maxlength: 40
                },
                // etc.
            },
            messages: {
                "fname": {
                    required: "First Name is required"
                },
                // etc.
            },
            submitHandler: function(form) {
                // your function
            }
        }); // close .validate()
    });  // close document.ready
<script>