要求使用jquery validate完成组中的至少一个字段

时间:2014-05-23 18:57:34

标签: jquery jquery-validate

我想要求检查/填写此表单中的至少一个字段

<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"]
    }
  },
)};

1 个答案:

答案 0 :(得分: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)“烹饪时间”字段的namecook_time[],因此必须如此指定。有括号时使用引号......

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

4)使用require_from_group方法时,您需要添加the additional-methods.js file