Is there a good way to validate jQuery code?

Question

I am a bonifide jQuery novice and I have some jquery code that I have pieced together, but I keep getting an error when the page loads. Problem is I am not sure if I have all the curly brackets and parenthesis closed properly and would really appreciate another set of eyes on this:

$(document).ready(function() {
    $('#slideshow').cycle({
        fx:  'scrollLeft', 
        timeout: 8000
    });
});
    $('#freeQuote form')
       .validate({
         submitHandler: function(form) {
           $(form).ajaxSubmit({
                success: function() {
                var Image = $('<img />').attr({src:'_images/free-quote-confirm.png', width:231, height:267, alt:"Success"});
                    $('#freeQuote form').hide();
                    $('#freeQuote').append(Image)
                }
           });
         }
       }); 

  $('#news-signup form')
    .validate({
     submitHandler: function(form) {
       $(form).ajaxSubmit({
            success: function() {
            var Image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"});
                $('#news-signup form').hide();
                $('#news-signup').append(Image)
            }
       });
     }
  }); 

I have this loading from its own .js file.

Thanks.

Answer 1

Yes, load the page in Chrome and press Ctrl-Shift-J to bring up the JavaScript console. This will instantly highlight any syntax errors.

Alternatively, get Firebug for Firefox.

As for your code, I think you should start smaller if you don't know what you're doing. Get the cycle() function working first, then try one of the validations, then the other. Make one bit work at a time, and every time you add something new, try it out to see if it works, or doesn't, and if it generates errors.

Once you get to that stage, follow Robert's advice and run it through JSLint. That'll show you where you're doing things wrong, like missing semicolons on the ends of statements.

Answer 2

Yes, http://www.jslint.com/

Your code returned the following errors:

Error:

Problem at line 14 character 50: Missing semicolon.

$('#freeQuote').append(Image)

Problem at line 27 character 48: Missing semicolon.

$('#news-signup').append(Image)

Implied global: $ 1,2,7,10,12,13,14,20,23,25,26,27, document 1

JSLint hates everything I do :P

Answer 3

A good way to help validate simple things like nesting of parens or curly braces is by using an editor like Notepad++ or Eclipse.

Answer 4

Use any powerful editor for JS.
Aptana, PHPStorm are the ones I've tried and saw that, at least PHPStorm, show very good notices when something's wrong in your JS code (including jQuery)

Answer 5

http://www.jslint.com/

you're missing a semicolon in two places: $('#freeQuote').append(Image) and $('#news-signup').append(Image)

Answer 6

The following lines should enclose everything else:

$(document).ready(function() {
    //  ...
    //  everything else
    //  ...
});

Also, the short (and recommended) form of that is:

jQuery(function($) {
    //  ...
    //  everything else
    //  ...
});

Answer 7

A lot of good ideas already posted ... only one thing to add. Use QUnit or a similar Javascript unit testing tool to run unit tests that actually exercise your code. There's no better way to know it's "right" than to define what "right" means, and then run it and verify that it's "right".

QUnit is what the JQuery authors use to ensure JQuery works right. Here's a getting started link.