Question

This is the simplified model :

public class Person {
   public int Id;
   public string Name;
}

public class Task {
  public int Id;
  public int PersonId;
  public DateTime StartDate;
  [GreaterThan("StartDate")]
  public DateTime EndDate;
}

To validate the EndDate >= StartDate, i write general GreaterThanAttribute. The server side is trivial, but i have problem on client side validation.

My GreaterThanAttribute got the other property (ex: “StartDate”) from constructor, then i pass this other property name to javascript as validation rule. But it won’t work, because the JS will not found this element, because MVC will render & named it as “Task.StartDate”, not “StartDate”.

My question is, how i can get the prefix which will be used by the controller to render my model inside IClientValidatable.GetClientValidationRules() ?

Thanks

Answer 1

Here’s how you could implement it:

public class GreaterThanAttribute : ValidationAttribute, IClientValidatable
{
    private readonly string _otherProperty;
    public GreaterThanAttribute(string otherProperty)
    {
        _otherProperty = otherProperty;
    }

    public override string FormatErrorMessage(string name)
    {
        return string.Format(CultureInfo.CurrentCulture, ErrorMessageString, name, _otherProperty);
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var property = validationContext.ObjectType.GetProperty(_otherProperty);
        if (property == null)
        {
            return new ValidationResult(
                string.Format(
                    CultureInfo.CurrentCulture, 
                    "unknown property {0}", 
                    _otherProperty
                )
            );
        }
        var otherValue = (DateTime)property.GetValue(validationContext.ObjectInstance, null);
        var thisValue = (DateTime)value;
        if (thisValue <= otherValue)
        {
            return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
        }

        return null;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule();
        rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
        rule.ValidationType = "greaterthandate";
        rule.ValidationParameters["other"] = "*." + _otherProperty;
        yield return rule;
    }
}

and on the client side:

(function ($) {
    var getModelPrefix = function (fieldName) {
        return fieldName.substr(0, fieldName.lastIndexOf('.') + 1);
    };

    var appendModelPrefix = function (value, prefix) {
        if (value.indexOf('*.') === 0) {
            value = value.replace('*.', prefix);
        }
        return value;
    };

    $.validator.unobtrusive.adapters.add('greaterthandate', ['other'], function (options) {
        var prefix = getModelPrefix(options.element.name),
            other = options.params.other,
            fullOtherName = appendModelPrefix(other, prefix),
            element = $(options.form).find(':input[name=' + fullOtherName + ']')[0];

        options.rules['greaterThanDate'] = element;
        if (options.message) {
            options.messages['greaterThanDate'] = options.message;
        }
    });

    $.validator.addMethod('greaterThanDate', function (value, element, params) {
        var otherDate = $(params).val();
        var thisDate = value;

        // TODO: put your custom date comparison implementation here between
        // the 2 values. Be careful here. Javascript date handling is culture dependent
        // so you might need to account for that when building your js Date instances

        return false;
    }, '');
})(jQuery);