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

Я также предлагаю добавить атрибут на inputrequired иметь в браузере обеспечить обратную связь об элементе тоже ,

$(".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, основанного на содержании любого/все ваши необходимые поля