jQuery - 2つの同一のフォーム、送信されたフォームのみを検証したい場合

Question

同じクラスの2つの同一フォームがある場合、フィールドが両方のフォームではなく、送信フォームに対してのみ空であるかどうかを確認します。

フォーム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クラスを与えることができますが、これはオプションではないので、送信ボタンがクリックされたフォームのみをチェックする方法には$（これ）を使用できますか？

Answer 1

jQueryを使用すると、クリックした要素からDOMを上下に移動することができます。この場合、あなたは、最寄りの.booking-formまで横断する.closestを使用してみてください、その後、私はまた、ブラウザにすぎ要素についてのいくつかのフィードバックを提供持って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; 
    } 
}); 

、あなたは、視認性、または.bookingbuttonのdisabled状態の任意の内容に基づいて/