jquery Validation on Multi Step Form

Question

I have this multi-step form which I would like to validate (to make sure video file with correct format is specified and all the required field are filled up). I want to use jquery.validate plugin to achieve this.

The problem is that the "Upload" button was working fine before I added in this validation code. I believe something is wrong with my code which causes the "Upload" button to stop working. I have included a fiddle here: http://jsfiddle.net/NZr4n/

I believe this is the part which causes the error. Anyone could help?

$('#msform').validate({
            rules: {    
                videoFile: {
                    required: true,
                    extension:'mov|mp4|mpeg|wmv'
                }
                videoTitle: {
                    required: true,
                }
                videoDescription: {
                    required: true,
                }
            },
            messages: {
                videoFile: "Please specify a file",
                videoTitle: "Title is required"
                videoDescription: "Description is required"
            }
        });

        if ((!$('#msform').valid()) {
            return false;
        }

See this answer for another way to do a multi-step form: http://stackoverflow.com/a/20688216/594235 — Sparky, Jan 01 '14 at 18:26

score 7 · Accepted Answer · answered Jan 01 '14 at 08:06

I went through your code on jsfiddle, and I noticed some seemingly minor syntax issues, which had major effects. Here is the corrected version here (and here's a link to the working jsfiddle):

    $('#msform').validate({
        rules: {    
            videoFile: {
                required: true,
                extension:'mov|mp4|mpeg|wmv'
            }, //notice the comma I added
            videoTitle: {
                required: true,
            }, //notice the comma I added
            videoDescription: {
                required: true,
            }
        },
        messages: {
            videoFile: "Please specify a file", //notice the comma I added
            videoTitle: "Title is required", //notice the comma I added
            videoDescription: "Description is required"
        }
    });

    if ((!$('#msform').valid())) { //I added an extra parenthesis at the end
        return false;
    }

Most major browsers now have options for developer consoles.

In Firefox, you can download Firebug. I opened Firebug up while looking at your jsfiddle, and it immediately showed me all the syntax errors. That's how I corrected the above code.

Google Chrome also has a console, under View -> Developer -> JavaScript Console

Just remember that members in an object have to be separated by commas. That was what caused the majority of your syntax issues.

Thank you so much! I should go and check out the fundamental syntax of jQuery next time. Also, thanks for the info on developer consoles, I believe it will help me in debugging. Cheers! — SCC, Jan 01 '14 at 10:36
Works great until i want to validate second step the same way , because only if i comment or erase the first validate() the other one works. Any ideas? — Moncho Chavez, Feb 09 '16 at 23:23

jquery Validation on Multi Step Form

1 Answers1