Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

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?

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.

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


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

Published Sep 18 2017, 10:30 AM by
Bookmark and Share

Comments

No Comments

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners