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而不是使用相同的元素。因此，它失去了与该功能的绑定。这就是这段代码不起作用的原因。

使用jQuery.click验证表单不起作用

4 个答案: