CODEWITHSUNDEEP
jqueryjquery-validate
Brad
Brad

Reputation: 12262

require at least one of the fields in a group to be completed using jquery validate

I want to require at least one of the fields in this form to be checked/filled in

<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>

I tried using jquery validate: http://jqueryvalidation.org/require_from_group-method/ but it still allows the form to be submitted if nothing is checked, any help is appreciation, thanks.

UPDATED validate rule because it was incorrect at first but still does not work.

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

Upvotes: 0

Views: 116

Answers (1)

Sparky
Sparky

Reputation: 98738

You have syntax/format issues with your code…

1) You've specified product_type twice.

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

2) And cook_time is not a rule.

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

3) The name of your "cook time" field is cook_time[], so it must be specified as such. Use quotes when you have brackets…

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

4) When using the require_from_group method, you need to include the additional-methods.js file.

Upvotes: 1

Related Questions