使用jQuery.click驗證表單不起作用

Question

這是我的代碼：

    $('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;
        }
    });

#price_match_submit是一個提交按鈕。 當我單擊按鈕時，此功能應執行並驗證表單。 但是它沒有按我期望的那樣工作。 表單未經任何驗證就被提交。 我在哪里做錯了？

Answer 1

您可能想要掛接到父表單的Submit事件，並需要防止默認行為：

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

返回false； 我認為只能停止事件冒泡。

Answer 2

您可以像這樣驗證

$('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;
    }
});

如果未經驗證，則返回false。

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

感謝您的所有回答和評論。

此代碼可以正常工作。 代碼的其他部分存在一些問題。

當我們將功能分配給元素時，該功能僅分配給該物理元素。 但是，當我們對元素進行一些物理修改時，其所有先前的屬性都會丟失。 在我的代碼中，我正在模式彈出窗口中顯示此html。 這是復制html而不是使用相同的元素。 因此，它失去了與功能的綁定。 這就是此代碼無法正常工作的原因。