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

ASP.NET Team Blog
18 September 2017

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?

DevExtreme Client-Side Validation

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.


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

Create highly responsive web apps for touch-enabled devices and traditional desktops.

From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

Download a free and fully-functional version of DevExtreme now: Download DevExtreme

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.