要求使用jquery validate來完成組中的至少一個字段

Question

我要至少檢查/填寫此表單中的一個字段

<form id="recipe-finder-form" method="post" action="" >
    <div class="form-group col-lg-6">
        <label for="keyword">Search by Ingredient or Keyword</label>
        <input type="text" name="keyword" class="form-control recipe-finder-form-group">
    </div>

    <div class="form-group col-sm-6">
        <label for="meal_type">Search by Meal</label>
        <select name="meal_type" class="form-control recipe-finder-form-group">
            <option value="">Select Meal</option>
            <option value="5">Breakfast</option>
            <option value="7">Dinner</option>
            <option value="6">Lunch</option>
            <option value="8">Snack</option>
        </select>
    </div>    

    <div class="form-group col-sm-6">
        <label for="product_type">Search by Product Type</label>
        <select name="product_type" class="form-control recipe-finder-form-group">
            <option value="">Select Product</option>
            <option value="27">Product 27</option>
            <option value="29">Product 29</option>
        </select>
    </div>    

    <div class="clearfix"><label>Cooking Time</label></div>

    <div class="recipe_checkbox minutes15 mins">
    <input type="checkbox" name="cook_time[]" value="11" id="minutes15 mins" class="recipe-finder-form-group">
    <label for="minutes15 mins">15 mins</label>
    </div>

    <div class="recipe_checkbox minutes30 mins">
        <input type="checkbox" name="cook_time[]" value="12" id="minutes30 mins" class="recipe-finder-form-group">
        <label for="minutes30 mins">30 mins</label>
    </div>

    <div class="recipe_checkbox minutes45 mins">
        <input type="checkbox" name="cook_time[]" value="14" id="minutes45 mins" class="recipe-finder-form-group">
        <label for="minutes45 mins">45 mins</label>
        </div>
    </div>

    <div class="form-group submit_area clearfix col-lg-3 col-sm-offset-9">
        <button type="submit" name="submit" class="btn btn-danger btn-block">Search</button>
    </div>
</form>

我嘗試使用jquery validate： http : //jqueryvalidation.org/require_from_group-method/，但如果未進行任何檢查，它仍然允許提交表單，任何幫助都是感謝，謝謝。

UPDATED驗證規則，因為起初它是不正確的，但仍然無法正常工作。

$("#recipe-finder-form").validate({

  rules: {
    keyword: {
      require_from_group: [1, ".recipe-finder-form-group"]
    },
    meal_type: {
      require_from_group: [1, ".recipe-finder-form-group"]
    },
    product_type: {
      require_from_group: [1, ".recipe-finder-form-group"]
    },
    "cook_time[]": {
      require_from_group: [1, ".recipe-finder-form-group"]
    }
  },
)};

Answer 1

您的代碼有語法/格式問題...

1）您已經指定了product_type兩次。

    product_type: {
      require_from_group: [1, ".recipe-finder-form-group"]
    },
    product_type: {  // <- duplicate
      cook_time: [1, ".recipe-finder-form-group"]
    }

2）並且cook_time不是規則。

    product_type: {
      // no such rule as 'cook_time'...
      cook_time: [1, ".recipe-finder-form-group"]
    }

3）您的“烹飪時間”字段的name為cook_time[] ，因此必須這樣指定。 有括號時使用引號…

rules: {
    "cook_time[]": {
        // the rules in here
    }
}

4）使用require_from_group方法時，需要包括additional-methods.js文件 。