JQuery Debug

Why not use firebug in firefox?

That's better, I believe.

You use jsfiddle so you can provide a link to someone to help you figure out your issues.

Can you look at JSFiddle and help me understand what I'm doing wrong?

So, what are trying to do?

It looks like you are missing some additional files because of this error:

ReferenceError: $ is not defined

In other words, looks like you either don't have files such as these:

script src="js/jquery.js" type="text/javascript"></script>
2.<script src="js/jquery-ui.js" type="text/javascript"></script>

or they are at locations your script could not reach.

To be specific, you need to download this jquery.js library and the error will atleast go away.

http://jsfiddle.net/aV3q3/11/

I did not get that error.  What I am trying to do is:
If you choose the radio button, you must also put in text.

Gary, thanks for your help.  However, when I go to your JSFiddle it does not work.  Am I missing something?
It gives the message:

Forbidden (403)

CSRF verification failed. Request aborted.

More information is available with DEBUG=True.

You cannot do a submit in jsfiddle, it's only for testing code.
And since you are only checking if the radio button is checked and the input filled in it is not going to stop the submit working when they are empty.

I placed the same code on a live page and it did not stop the page.  Does it matter where on the page it is?  Does it matter if there is an action on the form that goes to another page?

Attach your code.

<script>

$(document).ready(function() {
	$('form').submit(function(event) {
        var numberOfFieldWithName = $(":text[edd_purchase_form]");
        var errors_length = 0;
        if( $("#color_picker_sun").is(':checked') && $('#color-picker-comment').val() === '' ) {
                errors_length++;
                $(".alert").show();
            }
            else {
                $(".alert").hide();
            }
        if(errors_length>0) {
            event.preventDefault();
        }
	});
});

</script>

Select allOpen in new window

It would only stop the page if the radio is button is selected and the input is empty, else the page will submit.

When I run it and choose the radio button, it does not stop in.

Attach your full page, not just the jquery

Go here:
http://studiohilldesign.com/logoforhire/
scroll down and choose a logo.
On the right, click customize and then click purchase.
On the next page, on the right click customize.
A dialog will open, click on customize color.  Pick the first color SUN
Then go to the bottom and purchase. (it is in a sandbox)

You didn't say you were using WP

Change
$(document).ready(function() {

to
jQuery(document).ready(function($) {

Is this correct?  I still does not stop the script.  Is the 4th line correct   $('form')?

<script type="text/javascript">

jQuery(document).ready(function($) {
	$('form').submit(function(event) {
        var numberOfFieldWithName = $(":text[edd_purchase_form]");
        var errors_length = 0;
        if( $("#color_picker_sun").is(':checked') && $('#color-picker-comment').val() === '' ) {
                errors_length++;
                $(".alert").show();
            }
            else {
                $(".alert").hide();
            }
        if(errors_length>0) {
            event.preventDefault();
        }
	});
});

</script>

Select allOpen in new window

Can you fix your fancybox code, it's probably breaking other jquery
You're trying to attach fancybox to an element that doesn't exist.

OK, I fixed all of the script issues.  It was part of the themes JS.  However, it still does not stop when the criteria is not met.  Does it have to do with the placement of the script?  Meaning should it be in the head, body, or footer? Could it be a plugin? Should the script be in the form?

Thanks for taking the time to really explain things to me.  I appreciate it very much! I found where the error was and it did not have anything to do with what I / We were working on.
Thanks again, I learned a lot more about JQuery!