Using jQuery for quick form validation

Question

I'm coding an online application form that requires very basic validation. I have denoted required fields in HTML by adding the class requiredField to each. The script examines each required field, and if it is empty, returns false while adding a message to an error well.

I'm having issues... The script correctly adds the error messages when any field is empty, but if the fields are filled out it refuses to send the message. Can anyone help my understand why the "return true" under my "else" condition is not going through? Any help would be much appreciated.

Thanks!

Here is my validation script:

<script type="text/javascript">
    jQuery('#contactForm').submit(function(e) {
        jQuery( ".requiredField" ).each(function( index ) {
            if( jQuery(this).val().length == 0 ) {
                jQuery("#formErrors").show();
                jQuery( "#formErrors" ).append( "<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>" );
                jQuery(this).addClass('errorField');
                jQuery(window).scrollTop(0);
                                    return false;
            }
            else{
                return true;
            };
        });
      });
    });
</script>

Answer 1

You should include a line before return false;:

e.preventDefault();

This will stop the form from being submitted.

Also note: return false will stop the each loop, but it will not return false to the submit event.

Answer 2

You are returning false to the each function, rather than the submit function.

Returning true to each makes it loop onto the next item in the list, returning false makes it stop looping (like continue and break).

Like others have said, use e.preventDefault(); as the first line of your submit function, and then manually submit the form if everything is true.

I would rewrite the code like so:

jQuery('#contactForm').submit(function(e) {
    e.preventDefault();
    var goodToGo = true;
    jQuery( ".requiredField" ).each(function( index ) {
        if( jQuery(this).val().length == 0 ) {
            jQuery("#formErrors").show();
            jQuery( "#formErrors" ).append( "<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>" );
            jQuery(this).addClass('errorField');
            jQuery(window).scrollTop(0);
            goodToGo = false;
        };
    });
    if (goodToGo) {
        jQuery('#contactForm').submit();
    }
  });
});

You may also want to take a look at HTML5's required attribute, although this isn't widely used yet, but it's an interesting read: http://john.foliot.ca/required-inputs/

Answer 3

jQuery('#contactForm').submit(function (e) {
    var returnValue = true;

    jQuery(".requiredField").each(function (index) {
        if (jQuery(this).val().length == 0) {
            jQuery("#formErrors").show();
            jQuery("#formErrors").append("<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>");
            jQuery(this).addClass('errorField');
            jQuery(window).scrollTop(0);

            returnValue = false;
        }
        if (!returnValue) {
            e.preventDefault();
        }
        return returnValue;
    });
});

Instead of returning false for each required field, store the return value in a variable. If it is false, you want the e.preventDefault() to prevent the form from submitting