MVC 3 Complicated validation of models

Question

Current validation method for use in MVC 3 seems to be ValidationAttributes. I have a class validation that is very specific to that model and has interactions between a few properties.

Basically the model has a collection of other models and they are edited all in the same form. Let's call it ModelA and it has a collection of ModelB. One thing I might have to validate is that the sum of the some property of ModelB is less then a property of ModelA. The user has X number of points he can divide among some options.

ValidationAttributes are very generic and I'm not sure they are suited for this job.

I have no idea how IDateErrorInfo is supported in MVC 3 and whether it works straight out of the box.

One way would be to validate through a method but that means I can't do a clientside validation.

What is the proper way to do something like this? Are there any more options I have? Am I underestimating the power of ValidationAttribute?

Answer 1

IDateErrorInfo

IDateErrorInfo is supported by the MVC framework (a Microsoft tutorial can be found here). The default model binder will be reponsible for recreating model objects by binding the html form elements to the model. If the model binder detects that the model implements the interface then it will use the interface methods to validate each property in the model or to validate the model as a whole. See the tutorial for more information.

If you wanted to use client side validation using this method then (to quote Steve Sanderson) 'the most direct way to take advantage of additional validation rules is to manually generate the required attributes in the view':

<p>
@Html.TextBoxFor(m.ClientName, new { data_val = "true", data_val_email = "Enter a valid email address", data_val_required = "Please enter your name"})

@Html.ValidationMessageFor(m => m.ClientName)
</p>

This can then be used to trigger any client side validation that has been defined. See below for an example of how to define client side validation.

Explicit Validation

As you mentioned, you could explicity validate the model in the action. For example:

public ViewResult Register(MyModel theModel)
{
    if (theModel.PropertyB < theModel.PropertyA)
        ModelState.AddModelError("", "PropertyA must not be less then PropertyB");

    if (ModelState.IsValid)
    {
        //save values
        //go to next page
    }
    else
    {
        return View();
    }
}

In the view you would then need to use @Html.ValidationSummary to display the error message as the above code would add a model level error and not a property level error.

To specify a property level error you can write:

ModelState.AddModelError("PropertyA", "PropertyA must not be less then PropertyB");

And then in the view use:

@Html.ValidationMessageFor(m => m.PropertyA);

to display the error message.

Again, any client side validation would need to be linked in by manually linking in the client side validation in the view by defining properties.

Custom Model Validation Attribute

If I understand the problem correctly, you are trying to validate a model which contains a single value and a collection where a property on the collection is to be summed.

For the example I will give, the view will present to the user a maximum value field and 5 value fields. The maximum value field will be a single value in the model where as the 5 value fields will be part of a collection. The validation will ensure that the sum of the value fields is not greater than the maximum value field. The validation will be defined as an attribute on the model which will also link in nicely to the javascript client side valdation.

The View:

@model MvcApplication1.Models.ValueModel

<h2>Person Ages</h2>

@using (@Html.BeginForm())
{
    <p>Please enter the maximum total that will be allowed for all values</p>
    @Html.EditorFor(m => m.MaximumTotalValueAllowed)
    @Html.ValidationMessageFor(m => m.MaximumTotalValueAllowed)

    int numberOfValues = 5;

    <p>Please enter @numberOfValues different values.</p>

    for (int i=0; i<numberOfValues; i++)
    {
        <p>@Html.EditorFor(m => m.Values[i])</p>
    }

    <input type="submit" value="submit"/>
}

I have not added any validation against the value fields as I do not want to overcomplicate the example.

The Model:

public class ValueModel
{
    [Required(ErrorMessage="Please enter the maximum total value")]
    [Numeric] //using DataAnnotationExtensions
    [ValuesMustNotExceedTotal]
    public string MaximumTotalValueAllowed { get; set; }

    public List<string> Values { get; set; }
}

The Actions:

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(ValueModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }
    else
    {
        return RedirectToAction("complete"); //or whatever action you wish to define.
    }
}

The Custom Attribute:

The [ValuesMustNotExceedTotal] attribute defined on the model can be defined by overriding the ValidationAttribute class:

public class ValuesMustNotExceedTotalAttribute : ValidationAttribute
{
    private int maxTotalValueAllowed;
    private int valueTotal;

    public ValuesMustNotExceedTotalAttribute()
    {
        ErrorMessage = "The total of all values ({0}) is greater than the maximum value of {1}";
    }

    public override string FormatErrorMessage(string name)
    {
        return string.Format(ErrorMessageString, valueTotal, maxTotalValueAllowed);
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        PropertyInfo maxTotalValueAllowedInfo = validationContext.ObjectType.GetProperty("MaximumTotalValueAllowed");
        PropertyInfo valuesInfo = validationContext.ObjectType.GetProperty("Values");

        if (maxTotalValueAllowedInfo == null || valuesInfo == null)
        {
            return new ValidationResult("MaximumTotalValueAllowed or Values is undefined in the model.");
        }

        var maxTotalValueAllowedPropertyValue = maxTotalValueAllowedInfo.GetValue(validationContext.ObjectInstance, null);
        var valuesPropertyValue = valuesInfo.GetValue(validationContext.ObjectInstance, null);

        if (maxTotalValueAllowedPropertyValue != null && valuesPropertyValue != null)
        {
            bool maxTotalValueParsed = Int32.TryParse(maxTotalValueAllowedPropertyValue.ToString(), out maxTotalValueAllowed);

            int dummyValue;
            valueTotal = ((List<string>)valuesPropertyValue).Sum(x => Int32.TryParse(x, out dummyValue) ? Int32.Parse(x) : 0);

            if (maxTotalValueParsed && valueTotal > maxTotalValueAllowed)
            {
                return new ValidationResult(this.FormatErrorMessage(validationContext.DisplayName));
            }
        }

        //if the maximum value is not supplied or could not be parsed then we still return that the validation was successful.
        //why?  because this attribute is only responsible for validating that the total of the values is less than the maximum.
        //we use a [Required] attribute on the model to ensure that the field is required and a [Numeric] attribute
        //on the model to ensure that the fields are input as numeric (supplying appropriate error messages for each).
        return null;
    }
}

Adding Client Side Validation to the Custom Attribute:

To add client side validation to this attribute it would need to implement the IClientValidatable interface:

public class ValuesMustNotExceedTotalAttribute : ValidationAttribute, IClientValidatable
{
//...code as above...

    //this will be called when creating the form html to set the correct property values for the form elements
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule {
            ValidationType = "valuesmustnotexceedtotal", //the name of the client side javascript validation (must be lowercase)
            ErrorMessage = "The total of all values is greater than the maximum value." //I have provided an alternative error message as i'm not sure how you would alter the {0} and {1} in javascript.
        };

        yield return rule;
        //note: if you set the validation type above to "required" or "email" then it would use the default javascript routines (by those names) to validate client side rather than the one we define
    }
}

If you were to run the application at this point and view the source html for the field defining the attribute you will see the following:

<input class="text-box single-line" data-val="true" data-val-number="The MaximumTotalValueAllowed field is not a valid number." data-val-required="Please enter the maximum total value" data-val-valuesmustnotexceedtotal="The total of all values is greater than the maximum value." id="MaximumTotalValueAllowed" name="MaximumTotalValueAllowed" type="text" value="" />

In particular notice the validation attribute of data-val-valuesmustnotexceedtotal. This is how our client side validation will link to the validation attribute.

Adding Client Side Validation:

To add client side validation you need to add the following similar library references in the tag of the view:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

You need to also ensure that the client side validation is switched on in the web.config although I think this should be on by default:

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

All that is left is to define the client side validation in the view. Note that the validation added here is defined in the view but if it was defined in a library then the custom attribute (maybe not this one) could be added to other models for other views:

<script type="text/javascript">

    jQuery.validator.unobtrusive.adapters.add('valuesmustnotexceedtotal', [], function (options) {
        options.rules['valuesmustnotexceedtotal'] = '';
        options.messages['valuesmustnotexceedtotal'] = options.message;
    });

    //note: this will only be fired when the user leaves the maximum value field or when the user clicks the submit button.
    //i'm not sure how you would trigger the validation to fire if the user leaves the value fields although i'm sure its possible.
    jQuery.validator.addMethod('valuesmustnotexceedtotal', function (value, element, params) {

        sumValues = 0;

        //determine if any of the value fields are present and calculate the sum of the fields
        for (i = 0; i <= 4; i++) {

            fieldValue = parseInt($('#Values_' + i + '_').val());

            if (!isNaN(fieldValue)) {
                sumValues = sumValues + fieldValue;
                valueFound = true;
            }
        }

        maximumValue = parseInt(value);

        //(if value has been supplied and is numeric) and (any of the fields are present and are numeric)
        if (!isNaN(maximumValue) && valueFound) {

            //perform validation

            if (sumValues > maximumValue) 
            {
                return false;
            }
        }

        return true;
    }, '');

</script>

And that should be it. I'm sure that there are improvements that can be made here and there and that if i've misunderstood the problem slightly that you should be able to tweak the validation for your needs. But I believe this validation seems to be the way that most developers code custom attributes including more complex client side validation.

Hope this helps. Let me know if you have any questions or suggestions regarding the above.

Answer 2

This is what you are looking for:

http://www.a2zdotnet.com/View.aspx?Id=182