Unobtrusive validation of collection

Question

My model contains a collection:

public ICollection<int> ChildAges { get; set; }

This is a dynamic list of ages that can be added to, this is all controlled via JQuery.

giving me

<select name="ChildAges">...</select>
<select name="ChildAges">...</select>
<select name="ChildAges">...</select>
etc...

If I add the standard Required attribute the validation returns true if any one value in the collection is set.

How can I validate that all ChildAges in the form are set?

Answer 1

I created a new custom IClientValidatable attribute:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class MultipleRequiredValuesAttribute : RequiredAttribute, IClientValidatable
    {
        #region IClientValidatable Members

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var clientValidationRule = new ModelClientValidationRule()
            {
                ErrorMessage = base.ErrorMessage,
                ValidationType = "multiplerequiredvalues"
            };

            return new[] { clientValidationRule };
        }

        #endregion
    }

and applied this to my model:

[DisplayName("Ages(s)")]
        [MultipleRequiredValues(ErrorMessage = "You must provide ages for all children in all rooms")]
        public ICollection<int> ChildAges { get; set; }

I can then add the JQuery side:

(function ($) {

    $.validator.addMethod('multiplerequiredvalues', function (value, element) {
        if ($(element).is(':visible')) {
            var returnVal = true;
            var name = $(element).attr('name');
            var elements;
            if ($(element).is('input')) {
                elements= $('input[name='+name+']');
            }
            else
            {
                elements= $('select[name='+name+']');
            }
            elements.each(function() {
                if ($(this).is(':visible'))
                {
                    returnVal = $(this).val() != "" && $(this).val() != null;
                }
            });
            return returnVal;
        }
        else {
            return true;
        }
    });
    $.validator.unobtrusive.adapters.addBool("multiplerequiredvalues");
} (jQuery));

Note this also returns true if the element isn't visible