DotVVM - Build Conditional Validation Attribute

Validation in DotVVM

Validation in DotVVM is very similar to validation in ASP.Net MVC and ASP.Net Core.

You can validate your view model by using validation attributes. DotVVM does client side validation for only the following attributes:

Required
Compare
EmailAddress
Range
RegularExporession

If the user input is not valid you have two controls you can use to show error messages:

Validator Control
Shows error message against the target input control
VaicationSummary Control
Shows the summary for all errors in your view model.

Straight Validation

Suppose we have a small registration form that requires the user to enter his/her name, gender, and age. All fields are required. To validate user's input we just need to annotate our viewmodel properties with Required attribute. Our ViewModel class will be like this:

[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
public string Gender { get; set; }
[Required(ErrorMessage = "Age is required")]
public int? Age { get; set; }

In our view we will use only Validator control to show error messages.

<dot:Literal class="control-label col-md-3" Text="Name"></dot:Literal>
<dot:TextBox Text="{value: Name}" class="form-control" Type="Normal"></dot:TextBox>
<dot:Validator HideWhenValid="true" Value="{value: Name}" ShowErrorMessageText="true"></dot:Validator>
<dot:Literal class="control-label col-md-3" Text="Gender"></dot:Literal>
<dot:RadioButton CheckedItem="{value: Gender}" CheckedValue="{value: "1"}" Text="Male"></dot:RadioButton>
<dot:RadioButton CheckedItem="{value: Gender}" CheckedValue="{value: "2"}" Text="Female"></dot:RadioButton>
<dot:Literal class="control-label col-md-3" Text="Age"></dot:Literal>
<dot:TextBox Text="{value: Age}" class="form-control" Type="Number"></dot:TextBox>
<dot:Validator HideWhenValid="true" Value="{value: Age}" ShowErrorMessageText="true"></dot:Validator>
<dot:Button Click="{command: Save()}" Text="Save" class="btn btn-outline-secondary btn-sm"></dot:Button>

For Validator control we set:

HideWhenValid to true to show error message only if the user's input is not valid
ShowErrorMessageText to true to show error message that comes from our ViewModel

Conditional Validation

We know women don't like to tell their real age so we want to respect this in our registration form by validating the age field only if the user selected male as his gender but if gender is female, we will not force her to enter her age.

In DotVVM there is no conditional Required validation, so we need to build our custom validation attribute.

What we actually need is just a new class that inherts ValidationAttribute class and overrides IsValid method with our logic.

public class RequiredIfAttribute : ValidationAttribute
{
public string PropertyName { get; set; }
public object Value { get; set; }
public RequiredIfAttribute(string propertyName, object value, string errorMessage = "")
{
PropertyName = propertyName;
ErrorMessage = errorMessage;
Value = value;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
var instance = validationContext.ObjectInstance;
var type = instance.GetType();
var proprtyvalue = type.GetProperty(PropertyName).GetValue(instance, null);
if (proprtyvalue.ToString() == Value.ToString() && value == null)
{
return new ValidationResult(ErrorMessage);
}
return ValidationResult.Success;
}
}

First we added a PropertyName property to check its value to start validation or skip it, and Value property that will check against it.

Inside IsValid() method we are using reflection to get that value of the property and check if its value is equal to the provided value in the attribute. If the value of the current field is null then the field value is not valid otherwise the field is not required.

In our ViewModel we will replace Required attribute that decorates Age property with our new custom RequiredIf attribute .

[RequiredIf(nameof(Gender), "1", ErrorMessage = "Age is required")]
public int? Age { get; set; }

Frist parameter is the PropertyName and the second paramter is the Value of the Gender that makes Age field required (I used 1 and 2 for simpilcity).

Restriction

Our custom validation is server side validation. DotVVM needs you to submit your form to be able to run your custom validation.

Summary

In this post we validated our ViewModel like we used to do in ASP.Net MVC or ASP.Net Core and also created our custom validation to validate fields based on another field value.

You can find the full source code on github.