Question

我有两个相同的表格和相同的类，我想检查字段是否仅为提交的表单是空的 - 而不是两个表单。

表单HTML：

<form class="booking-form">

    <input type="text" name="pickup-address" class="pickup-address" />

    <button type="button" class="bookingbutton">
        <span>Reserve Now</span>
    </button>

</form>

JS：

$(".booking-form").on('click', '.bookingbutton', function () {

    if ( $(".pickup-address").val() == '') {        
        alert('Please enter a pickup location');
        return false;
    }

});

我使用的代码工作正常，但它会检查两种形式，我只希望它检查单击提交按钮的表单。

我知道我可以给每个表单一个unqiue类，但这不是一个选项，所以我可以使用$（this）来检查一下如何只检查单击提交按钮的表单吗？

Answer 1

使用jQuery可以从单击的元素中遍历DOM。在这种情况下，您可以尝试使用.closest遍历最近的.booking-form，然后使用它来搜索您的input

我还建议在required上添加input属性，以便浏览器提供有关该元素的一些反馈。

$(".booking-form").on('click', '.bookingbutton', function () {
    // find the closest form, because we have delegated the event, $(this) refers to the .bookingbutton element
    var form = $(this).closest('.booking-form');
    // check we found a form
    if(form.length === 0) return;

    // search within the found form for the .pickup-address
    if ( form.find(".pickup-address").val() == '') {        
        alert('Please enter a pickup location');
        return false;
    }
});

作为替代建议，您可以根据所有/所有必填字段的内容切换disabled的可见性或.bookingbutton状态

jQuery - 2个相同的表单，只想验证提交的表单

1 个答案: