0

ページに単一のフォームがあり、送信前に入力が完了していることを確認するための jQuery があります。

しかし今、ページ上で複数の同様のフォームを繰り返す必要があり、ボタンがクリックされたフォームの 2 つの入力のみをチェックし、ページ上の他のフォームをチェックしないように jQuery を変更する必要があります。

<div class="offerDate">
    <form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
        <fieldset> 
            <input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
            <input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
            <button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
         </fieldset>
    </form>
</div>
<div class="offerDate">
    <form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
        <fieldset> 
            <input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
            <input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
            <button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
         </fieldset>
    </form>
</div>

IDを使用してフォームをチェックするために以前に使用したjQuery

    // validate signup form on keyup and submit
    jQuery('#submitDates').click(function () {
    var found = false;
    jQuery("#to_date, #from_date").each(function(i,name){
        // Check if field is empty or not
        if (!found && jQuery(name).val()=='') {
        alert ('Please choose your arrival and departure dates!')
        found = true;
        } ;
    });
    return !found;
    });
4

3 に答える 3

3

.prev( [セレクター] )

戻り値: jQuery

説明: 一致した要素のセット内の各要素の直前の兄弟を取得します。オプションでセレクターによってフィルター処理されます。

これは非常に短く、ボタンの直前に表示されるすべての入力を対象とします。

$("button").prev("input")

jsFiddled here

于 2013-09-11T15:37:10.323 に答える
2

次のように試すことができます：

コード

jQuery('.submitDates').click(function () {
 var found = false;
 jQuery(this).siblings("input").each(function (i, name) {
     // Check if field is empty or not
     if (!found && jQuery(name).val() == '') {
         alert('Please choose your arrival and departure dates!')
         found = true;
     };
 });
 return !found;

});

inputsあなたが の兄弟であると仮定しますbutton。ボタンも に変更したことに注意idしてくださいclass。

フィドル http://jsfiddle.net/FY9P9/

于 2013-09-11T15:45:51.667 に答える
0

ボタンの入力がどこであっても、Closest と Find も同様に実行します。

HTML:

<form class="form">
    <input type="text" class="toDate" />
    <input type="text" class="fromDate" />
    <div class="button">Click</div>
</form>
<form class="form">
    <input type="text" class="toDate" />
    <input type="text" class="fromDate" />
    <div class="button">Click</div>
</form>

JS:

$(".button").each(function () {
    $(this).click(function () {
        if (($(this).closest(".form").find(".toDate").val() == "") || ($(this).closest(".form").find(".fromDate").val() == "")) {
            alert("Please fill in arrival and departure Date");
        }
    })
})

http://jsfiddle.net/GuqJF/1/

于 2013-09-11T15:52:10.120 に答える