implementing require_from_group in jquery validate

Question

I am trying to get get a group of inputs to validate as one. So if any of the inputs is empty, it will show a message below the inputs. I have been following another SO answer here . The 4 inputs will not validate. They just don't do anything when there is no data on submit. My other inputs validate just fine. Here is my form:

<div class="creditcard form-group">
    <h2>Credit Card</h2>
    @Html.TextBoxFor(model => model.cardNumber, new { @class = "form-control cc", @id = "CardNum", @placeholder = "Card Number" })
    @Html.TextBoxFor(model => model.name, new { @class = "form-control cap cc", @id = "FullName", @placeholder = "Full Name" })
    @Html.TextBoxFor(model => model.expDate, new { @class = "form-control cc", @id = "CardExp", @placeholder = "MM/YY" })
    @Html.TextBoxFor(model => model.cvv, new { @class = "form-control cc", @id = "CardCVV", @placeholder = "CVV" })
    @Html.HiddenFor(model => model.ccType)
    ....

And my jquery that is validating:

$.validator.addMethod("require_from_group", function (value, element, options) {
    var valid = $(options[1], element.form).filter(function () {
        return $(this).val();
    }).length >= options[0];
    return valid;
    }, $.validator.format("Please fill out at least {0} of these fields."));
    $("form").validate({
        rules: {
            cardNumber: { require_from_group: [2, ".cc"] },
            name: { require_from_group: [2, ".cc"] },
            expDate: { require_from_group: [2, ".cc"] },
            cvv: { require_from_group: [2, ".cc"] }
        }
    });

This is MVC 5 if that helps.

Answer 1

You're trying to follow an answer that is five years old. Since that time, the default require_from_group method's bugs have been fixed; and the function is presently much more complex than the function you're manually creating.

So you only need to include the additional-methods.js file to use the default require_from_group method. Otherwise, you could copy this method out of the additional-methods.js file, but IMO, it's better to include the file for future maintainability.

If that doesn't fix it, you'll need to show us your rendered HTML markup, as seen in the browser source, to check if you've made any other mistakes.

Working DEMO: http://jsfiddle.net/jo65e26a/

---

I am trying to get get a group of inputs to validate as one.

That is not what require_from_group is meant to do, nor is that how you've configured it...

require_from_group: [2, ".cc"]

The 2 parameter means that any two inputs out of your group of four will be required. If you need all four to be filled out then you would set the parameter to 4 , but then it's absolutely no different than simply using required rule on all four inputs.

Documentation: require_from_group

Perhaps you meant to group the validation messages together into one? If so, then you'd use the groups option .

groups: {
    ccGroup: "cardNumber name expDate cvv"
}

DEMO 2: http://jsfiddle.net/sx7cda0c/1/

---

There is also a method called skip_or_fill_minimum which means that you set a minimum number of fields out of a group to be required, otherwise, the group can be skipped. Not sure if that's what you want either.