Question

I’ve got an entire validation code bound to $('#post-button').click. The idea is, the variable e_exit is set to true, then the data within the form goes through a series of checks. If it meets the condition of any if statement, a message is displayed with the issue, and e_exit is set to false. Except the problem is, that it isn’t done properly, as the form is still submitted (like a quarter of a second after the message is displayed).

I’m dealing with boolean values here, so typecasting certainly can’t be the issue, I really don’t understand what’s going on:

$('#post-button').click( function() {
    var e_exit = true;
    var notif_message = '<div class="notification red"><div class="cross"></div>';

    var name = $('input[name=name]').val();
    var url = $('input[name=url]').val();
    var urlrgx = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/i;
    var urltst = urlrgx.test(url);

    if(name == '' || name == 'Enter a name for this offer') {
        $('#notification').html(notif_message + "You need to enter a name for this offer name. Try to pick something that you'll easily remember when seen again.</div>");
            e_exit = false;
    }

    if(!urltst) {
        $('#notification').html(notif_message + "You need to enter a valid offer url prefixed with http:// for this offer.</div>");
            e_exit = false;
    }

    var rotation_select_val = parseInt($('select[name=r_id]').val());
    if(rotation_select_val != 0) {
        var min_val = isNaN($('input[name=r_min]').val());
        var max_val = isNaN($('input[name=r_max]').val());

        if(min_val || max_val) {
            $('#notification').html(notif_message + "You need to enter a numeric value for your rotation's min and max hits for this offer.</div>");
            e_exit = false;
        }
    }

    var geo_select_val = $('select[name=g_country\\[1\\]]').val();          
    if(geo_select_val != 0) {
        var geo_url_val = $('input[name=g_url\\[1\\]]').val();
        var geo_urltst = urlrgx.test(geo_url_val);

        if(!geo_urltst) {
            $('#notification').html(notif_message + "You need to enter a valid url prefixed with http:// for your geo-location targets.</div>");
            e_exit = false;
        }
    }

    if(e_exit) {
         $('form').submit();   
    }
});

Any answers as to why this could be happening, or edits with explanations would be of a great help!

Answer 1

If #post-button is a submit button, you need to return false to stop form submission.

A better solution would be to bind to the form’s submit event:

$("#your-form").submit(function() {
    // validate...

    return e_exit;
});

This will only allow the form to submit if you return true from the event handler.

Edit:

Perhaps the ajax plugin is also subscribing to the click event of the post button? In that case, I’d return false and make sure to stop the event propagating further like so:

$("#post-button").click(function(ev) {
    // validation
    ev.stopPropagation();
    return false;
});