Question

I have a ViewModel that holds Date, Hour and minute as a string, each of these have a textbox for entering values into them, what I then want is a custom validator that ensures that if a value is entered into one of the fields then the rest have to be filled out as well, otherwise they can be empty, its all or nothing!

I have made a little test project here, but its not workign the way it should, I have followed http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2 but I think my issues are clientside, as I cant see any value on the Params if I do a breakpoint in chrome.

The View:

@model validationproject.Models.DateTimeViewModel

@{
    ViewBag.Title = "ViewPage1";
}

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="../../Scripts/Validators.js" type="text/javascript"></script>

<h2>ViewPage1</h2>
@using (Ajax.BeginForm("CreateDateTime", "Home", new {}, new AjaxOptions {HttpMethod = "Post"}))
{
    <span>
    @Html.TextBoxFor(model => model.Date, new {@Id = "date"}) 

    @Html.TextBoxFor(model => model.Hour, new {@Id = "hour"})

    @Html.TextBoxFor(model => model.Minute, new {@Id = "minute"})

    @Html.ValidationMessageFor(model => model.Date)
    @Html.ValidationMessageFor(model => model.Hour)
    @Html.ValidationMessageFor(model => model.Minute)
    </span>
}  

JQuery validator file

$.validator.unobtrusive.adapters.add(
            'fulldaterequired',
            ['part1', 'part2'],
            function (options) {
                options.rules['fulldaterequiredcheck'] = options.params;
                options.messages['fulldaterequiredcheck'] = options.message;
            }
        );

$.validator.addMethod(
        'fulldaterequiredcheck',
        function (value, element, params) {

            if (!value && (params['otherproperty1'] || params['otherproperty2'])) {
                return false;
            }
            return true;
        }
    );

My Viewmodel

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace validationproject.Models
{
    public class DateTimeViewModel  
    {
        [Display(Name = "Date")]
        [FullDateRequired(("Hour"), ("Minute"))]
        public string Date { get; set; }

        [Display(Name = "Hour")]
        [FullDateRequired(("Minute"), ("Date"))]
        public string Hour { get; set; }

        [Display(Name = "Minute")]
        [FullDateRequired(("Hour"), ("Date"))]
        public string Minute { get; set; }
    }

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public sealed class FullDateRequired : ValidationAttribute, IClientValidatable
    {
        private const string DefaultErrorMessage = "{0} is required.";
        public string OtherProperty1 { get; private set; }
        public string OtherProperty2 { get; private set; }
        public FullDateRequired(string otherProperty1, string otherProperty2)
            : base(DefaultErrorMessage)
        {
            OtherProperty1 = otherProperty1;
            OtherProperty2 = otherProperty2;
        }
        public override string FormatErrorMessage(string name)
        {
            return string.Format(ErrorMessageString, name);
        }
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            var otherProperty1 = validationContext.ObjectInstance.GetType().GetProperty(OtherProperty1);
            var otherProperty2 = validationContext.ObjectInstance.GetType().GetProperty(OtherProperty2);
            var otherProperty1Value = string.IsNullOrEmpty((string)otherProperty1.GetValue(validationContext.ObjectInstance, null));
            var otherProperty2Value = string.IsNullOrEmpty((string)otherProperty2.GetValue(validationContext.ObjectInstance, null));

            if (string.IsNullOrEmpty((string)value) && (!otherProperty1Value || !otherProperty2Value))
            {
                return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
            }
            return ValidationResult.Success;
        }
        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var clientValidationRule = new ModelClientValidationRule()
            {
                ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
                ValidationType = "fulldaterequired"
            };
            clientValidationRule.ValidationParameters.Add("otherproperty1", OtherProperty1);
            clientValidationRule.ValidationParameters.Add("otherproperty2", OtherProperty2);
            return new[] { clientValidationRule };
        }
    }
}

Answer 1

Your javascript contains ‘part1’ and ‘part2’ which should be ‘otherproperty1’ and ‘otherproperty2’ as defined in your viewmodel. The correct script should be:

$.validator.unobtrusive.adapters.add(
        'fulldaterequired',
        ['otherproperty1', 'otherproperty2'],
        function (options) {
            options.rules['fulldaterequiredcheck'] = options.params;
            options.messages['fulldaterequiredcheck'] = options.message;
        }
    );

        $.validator.addMethod(
    'fulldaterequiredcheck',
    function (value, element, params) {
        if (value == '' && ($('#' + params['otherproperty1']).val() != '' || $('#' + params['otherproperty2']).val() != '')) {
            return false;
        }
        return true;
    }
);

Add this to your view (inside the form) to show errormessages when you press the submit button:

    @Html.ValidationMessageFor(model => model.Date)
    @Html.ValidationMessageFor(model => model.Hour)
    @Html.ValidationMessageFor(model => model.Minute)

    <input type="submit" />