Validating form using jQuery.click does not work

Question

Here is my code:

    $('input#price_match_submit').click(function(event) {
        if ($.trim($('input#price_match_competitor_price').val()) == '') {
            alert("Please enter competitor's price.");
            return false;
        }
        if ($.trim($('input#price_match_name').val()) == '') {
            alert("Please enter your name.");
            return false;
        }
        if ($.trim($('input#price_match_quantity').val()) == '') {
            alert("Please enter the quantity.");
            return false;
        }
        if ($.trim($('input#price_match_email').val()) == '') {
            alert("Please enter your email address.");
            return false;
        }
        if ($.trim($('input#price_match_competitor_website').val()) == '') {
            alert("Please enter competitor's website.");
            return false;
        }
        if ($.trim($('input#price_match_phone_number').val()) == '') {
            alert("Please enter your phone number.");
            return false;
        }
    });

Here #price_match_submit is a submit button. When I click on the button, this function should execute and validate the form. But it's not working as I am expecting. The form is being submitted without any validation. Where I am doing wrong?

Answer 1

You might instead want to hook into the submit event of the parent form and need to prevent the default behaviour:

$('#form').on('submit', function (e) {
    if (everything_failed) {
        e.preventDefault();
        return false;
    }
});

return false; only stops event bubbling I think.

Answer 2

You can validate like this

$('form').on('submit', function() {
// do validation here
       if ($.trim($('input#price_match_competitor_price').val()) == '') {
        alert("Please enter competitor's price.");
        return false;
    }
    if ($.trim($('input#price_match_name').val()) == '') {
        alert("Please enter your name.");
        return false;
    }
    if ($.trim($('input#price_match_quantity').val()) == '') {
        alert("Please enter the quantity.");
        return false;
    }
    if ($.trim($('input#price_match_email').val()) == '') {
        alert("Please enter your email address.");
        return false;
    }
    if ($.trim($('input#price_match_competitor_website').val()) == '') {
        alert("Please enter competitor's website.");
        return false;
    }
    if ($.trim($('input#price_match_phone_number').val()) == '') {
        alert("Please enter your phone number.");
        return false;
    }
});

return false if not validated.

Answer 3

$(#price_match_submit').click(function(event) {
   if ($.trim($('input#price_match_competitor_price').val()) == '') {
        alert("Please enter competitor's price.");
        event.preventDefault();
    }
    else if ($.trim($('input#price_match_name').val()) == '') {
        alert("Please enter your name.");
        event.preventDefault();
    }
    else if ($.trim($('input#price_match_quantity').val()) == '') {
        alert("Please enter the quantity.");
        event.preventDefault();
    }
    else if ($.trim($('input#price_match_email').val()) == '') {
       alert("Please enter your email address.");
       event.preventDefault();
    }
    else if ($.trim($('input#price_match_competitor_website').val()) == '') {
        alert("Please enter competitor's website.");
        event.preventDefault();
    }
    else if ($.trim($('input#price_match_phone_number').val()) == '') {
        alert("Please enter your phone number.");
        event.preventDefault();
    }

    // if nothing happened until now, the form will be submited
});

Answer 4

Thank you for all your answer and comment.

This code works fine. There was some issue with other parts of code.

When we assign a function to an element, the function is assigned to that physical element only. But when we do some physical modification to the elements, all its previous properties get lost. In my code, I was displaying this html in a modal popup. Which was copying the html instead of using the same elements. So, it lost this binding with the function. And this is the reason this code was not working.