0

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.

Community
  • 1
  • 1
dmikester1
  • 1,374
  • 11
  • 55
  • 113
  • and where is your `ValidationMessageFor` Helper on `View`? – teo van kot Feb 03 '15 at 21:01
  • Where is the relevant HTML markup as rendered by the browser? JavaScript can only see/use the actual HTML source as sent to the browser, it cannot see your ASP code on the server. – Sparky Feb 03 '15 at 21:04

1 Answers1

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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Thank you, I do want all 4 to be required, so I think I want the groups option. – dmikester1 Feb 03 '15 at 22:04
  • @dmikester1, then simply set them to `required` and the 4 messages can be combined into one with the `groups` option. You can also use a conditional within the `errorPlacement` option to place the message within your layout, like this: http://jsfiddle.net/sx7cda0c/1/ – Sparky Feb 03 '15 at 22:25
  • This seems like it should work. I think it has something to do with me using MVC. Do I need to add the rules differently when using MVC? In my document.ready function I currently have this code: `$("form").validate({ rules: { .....` – dmikester1 Feb 04 '15 at 13:39
  • Nevermind, that last comment, I was able to figure it out after digging some more. – dmikester1 Feb 04 '15 at 16:26