jQuery form submission handler - odd behaviour

Question

Edit: answered, was a syntax error, see below for fixed code...

Hi all, long time reader, first time asker.

The below code is always allowing form submission, even given that I've overidden the return value at the end of the function, outside of any conditional statements. Form submission is only disallowed if there is NOTHING in the function body except return false. Deeply odd.

I have verified that the function is being called on form submission by entering an alert in the function body and checking that it alerts me. I tried stripping the code out into a discrete function and specifying that as the event handler, no difference.

The workaround is probably to monitor the state of my controls and disable/enable the submit button of the form accordingly, but surely I'm just missing something obvious as this technique works everywhere else.

Does anyone have any ideas? My google-fu has failed me and SO doesn't have anything on this that I could see (yet). I'm at my wit's end. The context for this, btw, is FF3, jQuery 1.4.2, and I'm working on my company's mantisbt installation. The html of the form is completely normal.

Cheers,

G

    jQuery(document.forms[2]).submit(function(){

    var canSubmit = true;
    var msg = '';   

    // we only do validation if those controls are present and have some options which can be selected
    if(jQuery("select[name=priority] option").length() > 0 && jQuery("select[name=severity] option").length() > 0){

        //there must be a selection in priority
        if(jQuery("select[name=priority]").val() == ''){

            canSubmit = false;
            msg = msg + 'Please select a priority!\n';

        }

        //there must be a selection in severity
        if(jQuery("select[name=severity]").val() == ''){

            canSubmit = false;
            msg = msg + 'Please select a severity!\n';

        }

        //the priority cannot be P1 or P2 and also a feature request
        if( jQuery("select[name=priority]").val() > 49 
                && jQuery("select[name=severity]").val() == 60){

            canSubmit = false;
            msg = msg + 'Feature requests cannot be P1 or P2!';             

        }

        //if there is some feedback, alert it to the user
        if(msg != ''){

            alert(msg);

        }

    }

    //debugging override - always return false!
    return false; //instead of canSubmit;       

});

Edit: here's the fixed code. Many thanks Gaby!

    var canSubmit = true;
var msg = '';

// validate form submission
jQuery(document.forms[2]).submit(function(e){

    msg = '';
    canSubmit = true;

    // we only do validation if those controls are present and have some
    // options
    // which can be selected
    if(jQuery("select[name=priority] option").length > 0 && 
            jQuery("select[name=severity] option").length > 0){

        // there must be a selection in priority
        if(jQuery("select[name=priority]").val() == 0){

            canSubmit = false;
            msg = msg + 'Please select a priority!\n';

        }

        // there must be a selection in severity
        if(jQuery("select[name=severity]").val() == 0){

            canSubmit = false;
            msg = msg + 'Please select a severity!\n';

        }

        // the priority cannot be P1 or P2 and also a feature request
        if( jQuery("select[name=priority]").val() > 49 
                && jQuery("select[name=severity]").val() == 60){

            canSubmit = false;
            msg = msg + 'Feature requests cannot be P1 or P2!';             

        }           

        if(!canSubmit){

            // if there is some feedback, alert it to the user
            if(msg != ''){

                alert("There were some problems:\n" + msg);

            }

            return false;

        }

    }

});

Answer 1

It always gets submitted because you have javascript errors occuring, and the code never reaches the return false statement..

The problem is that there is no length() function for the jquery object. It is a property.

You should change the two .length() to .length in your first if.

Alternatively you can use the .size() method.

More about it at http://api.jquery.com/length/

Answer 2

Try adding a 'preventDefault()'...

jQuery(document.forms[2]).submit(function(evt){
    evt.preventDefault();
    .
    .
    .

Then, after you've completed any validation and manipulation, you can manually call the form's submit:

$(document.forms[2]).submit();