Question

i have a form that when submitted, if any field is empty id like to prevent the submission and add a class to the field.

For some reason I cant seem to get it too work, Ive added a fiddle, can anybody point out where im goign wrong?

http://jsfiddle.net/yycqW/

Answer 1

There are a couple of problems with your fiddle. Firstly, you haven’t closed the ready event handler. Secondly, are passing $this into jQuery which is undefined. You need to pass this instead.

Finally, the form is always going to be submitted because you have to actually stop the submission. You can call the preventDefault method of the event object to do so. Here’s a new version of your code:

$(document).ready(function(){
    $("#form").submit(function(e) {
        $('input').each(function() {
            if ($(this).val() == '') { //Pass this into jQuery, not $this
                $(this).addClass('highlight');
                e.preventDefault(); //Stop the form from submitting
            }
        });              
    });
});

Also note that it’s unnecessary to use $(this).val() inside the each loop. this will be a reference to a DOM element, and that element will have a value property, so it’s more efficient to simply use this.value.