DotVVM
Published in

DotVVM

DotVVM:Build Conditional Validation Attribute

Valdation 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 do client side validation for only the following attributes:

  • Required
  • Compare
  • EmailAddress
  • Range
  • RegularExporession

If the user’s 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 registaration 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

[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>
<br /><br />
<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>
<br /><br />
<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>
<br /><br />
<dot:Button Click=”{command: Save()}” Text=”Save” class=”btn btn-outline-secondary btn-sm”></dot:Button>

Foucs on Validator control we set

  • HideWhenValid = true to show error message only if the user’s input is not valid.
  • ShowErrorMessageText = 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 registeration form by validating the age feild only if the user selected male as his gender but if gender was female 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 override 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 of 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 and 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 decorate Age property with our new custom attribute RequiredIf.

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

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

Restriction

Our custom validation is server side validation. DotVVM need 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.

--

--

--

DotVVM is an open source ASP.NET framework that lets you build line-of-business applications and SPAs without writing tons of JavaScript code.

Recommended from Medium

Kislay’s Newsletter #23

C vs JavaScript: A comparison between a 50-year-old language and a nearly-30-year old language

Introduction to x64 Linux Binary Exploitation (Part 1)

8+ Flawless Programming Languages For Web Development

Ironhack Full Stack Developer Bootcamp — Week 2 — Calvin Torra

S3 Ep7 collaboration

Web Scraping Basics: A Developer’s Guide To Reliably Extract Data

Right Disk Type for performance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amir Ismail

Amir Ismail

More from Medium

The splendour of UI State Management

How to Display Sparklines in a WPF Datagrid Application | ComponentOne

Observer Pattern

Clean Code with ESLint