DevExtreme MVC Client-Side Validation: [Required] Attribute Changes (17.1.6)

We received some feedback from our customers about an issue with how the DevExtreme MVC CheckBox Control handles client-side validation.

The main issue they found was that when using the MVC CheckBox control on a form that needed to be submitted, the user had to check the box before they could submit the form even if the field is not marked as 'Required' on your data model.

This was an odd issue because when we looked at the server-side model, we didn't find any attribute that would've require the "true" value only. So then why does our CheckBox control enforces the 'required' check?

A Few Words About DevExtreme Validation

DevExtreme ASP.NET MVC Controls are, basically, client-side JavaScript DevExtreme widgets wrapped in native ASP.NET MVC server-side controls. Client-side editors have a set of validation rules that are mapped to attributes of the server-side model. This way, the editors can generate validation rules based on the attributes automatically.

The Root of the Problem

After some debugging and research, we discovered that the 'Required' attribute is implicitly attached to non-nullable properties, such as the Boolean property in our case. This was confirmed in a note to the AddImplicitRequiredAttributeForValueTypes property in ASP.NET MVC documentation.

So what happens if we use the native MVC check box control, will it still display the same issue? Turns out, no, it does not because the native check box control ignores the 'required' check.

Then we compared the results of validating a value against the 'required' rule in DevExtreme with that in jQuery Unobtrusive used in ASP.NET MVC projects by default. Here's what we found:

Value	jQuery Unobtrusive	DevExtreme	Match
null	invalid	invalid
number	valid	valid
empty string	invalid	invalid
non-empty string	valid	valid
DateTime	valid	valid
true	valid	valid
false	valid	invalid

The crucial difference turned out to be in how the "false" value is handled. jQuery Unobtrusive validation accepts both "true" and "false" values of a Boolean property. DevExtreme validation, which adopts the HTML5 behavior, considers "false" an invalid value, and as a result, doesn't let the user submit the form unless the CheckBox is checked.

Now that the mystery is uncovered, we found two possible ways to work around this issue:

1. set to "false" the AddImplicitRequiredAttributeForValueTypes property
2. use a nullable bool type instead of bool type in your application

Unfortunately, both of these would not work for all users.

Solution

To provide a good solution that will work for all customers, we're introducing a new global flag called Compatibility.Validation.IgnoreRequiredForBoolean in the v17.1.6 release.

When set to true, the DevExtreme validation engine will ignore the Required validation rule for bool type, which is the proper mode for MVC apps. When set to false, it keeps the previous DevExtreme or HTML5 like behavior. The default setting will be set to false in versions 17.1.x.

We've updated our project templates and you'll find this new flag in:

• "Global.asax" file for classic MVC on VB or CS

protected void Application_Start()
{
  DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = false;
  // ... the rest of your code ...
}

Protected Sub Application_Start()
{
  DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = False' ... the rest of your code ...
}

• "Startup.cs" file for ASP.NET Core MVC

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  DevExtreme.AspNet.Mvc.Compatibility.Validation.IgnoreRequiredForBoolean = false;
  // ... the rest of your code ...

How to use Required for bool type when IgnoreRequiredForBoolean is enabled?

You can decorate your model properties with the [DevExtremeRequired] attribute. This attribute supports the HTML5 behavior for bool type on a client and on the server side. For all other value types, it's behavior is similar to using the 'Required' attribute.

Beware: will change in v.17.2

The global flag is "false" by default in v17.1, however, it'll change to "true" in v17.2.

Twitter: @mehulharry