0

我在页面上有一个表单，我有一些 jQuery 来确保在提交之前输入已经完成。

但是现在我需要在页面上重复多个类似的表单，并且我需要更改 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>

我以前用过的 jQuery 使用 ID 检查表单

    // 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 回答