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

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

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

$(".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 的可见性或disabled 状态