[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Collapse]Data Editors
    Included Components
   [Expand]Implementation Details
   [Collapse]Getting Started
    [Collapse]How To: Create a Registration Form
      Starting Point
      Lesson 1 - Create Layout
      Lesson 2 - Bind Data Editors
      Lesson 3 - Customize Editors
      Lesson 4 - Implement Input Validation using ValidationRules
      Lesson 5 - Implement Input Validation using IDataErrorInfo
     How to: Enable Masked Input (Text Editor)
     How to: Create a Functional ButtonEdit
     How to: Create a ComboBoxEdit and Bind it to Data
     How to: Customize a DateEdit
     How to: Create and Customize a ProgressBarEdit
     How to: Create and Customize a RangeTrackBarEdit
     How to: Create and Add Palettes in PopupColorEdit
     How to: Customize a SpinEdit to Display Currency Values
     How to: Create a SearchLookUpEdit and Bind it to Data
   [Expand]Editor Types
   [Expand]Common Features
   [Expand]Range Control
   [Expand]Visual Elements
   [Expand]End-User Capabilities
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 4 - Implement Input Validation using ValidationRules

Open the previously created project or RegistrationForm.Lesson3 to follow along. The RegistrationForm.Step4 project from the DXEditorsTutorial example contains the results of this part.

The goal is a registration form which behaves like the Google registration form. Open the Google registration form to research it in detail. When the form is first displayed, its “Register” button should be enabled; the editors do not indicate any input errors. Typing into the First Name editor field, clearing the input and leaving the editor should display the First Name editor in an error state.

In this lesson, you will implement this behavior.

The best approach for implementing this behavior is the Binding Validation Rules – a standard approach provided by the WPF platform. Before moving on, review the following MSDN documentation topic: How to: Implement Binding Validation.

You will create a validation rule to indicate an input error for each empty editor field by adding a Common folder in the project with a new file, ValidationRules.cs, and defining the following class.

The RequiredValidationRule class checks the inputted value from the overridden Validate method. For a null or empty edit value, the method returns an appropriate error message.

To make use of this validation rule, place a RequiredValidationRule instance in the Binding.ValidationRules collection as follows.

The Binding.UpdateSourceTrigger property is set to PropertyChanged – the default value is LostFocus. Under the LostFocus value, the validation process is invoked only when the end-user leaves the editor.

To illustrate the binding mechanism on the EditValue property available on any of the DXEditors, consider the following simple binding: EditValue="{Binding FirstName, Mode=TwoWay}".

EditValue is the target property where binding is applied. By requirement, the target property is always a DependencyProperty.

The FirstName property is the source property. The binding binds the target property to the source property. The source can be a DependencyProperty, a regular property or a property which triggers the INotifyPropertyChanged.PropertyChanged event when a new value is set. The source, however, cannot be a field – a property is necessary.

The binding makes use of the Two-Way binding mode to also passes input data at the target to the underlying data encapsulated by the source property. The Two-Way binding behavior is, by default, to update the source property when the bound control loses focus. This update behavior can be specified from the UpdateSourceTrigger binding parameter. For instance, setting the UpdateSourceTrigger parameter to PropertyChanged, updates the source property as the target property is updated. Please see the following article for details: Binding.UpdateSourceTrigger.

Now, turn your attention to how DXEditors modify the BaseEdit.EditValue property.

DXEditors support a validation mechanism which avoids posting invalid values to the underlying data source while providing the capability to inform the end-user of invalid input data. Importantly, the validation mechanism is invoked before the EditValue is changed. Only after validation succeeds, the editor posts the input value to its EditValue property. DXEditors provide two properties for invoking the validation mechanism: BaseEdit.ValidateOnEnterKeyPressed, and BaseEdit.ValidateOnTextInput.

The ValidateOnEnterKeyPressed property controls whether or not the EditValue property is updated when the Enter key is pressed. The ValidateOnTextInput property determines whether or not the EditValue property is updated as the end-user types in the editor.

For the FirstName editor, it is necessary to show an error only after an end-user has typed, cleared the editor and left the editor empty. You have already added this check using a Binding Validation Rule. What remains is to customize the editors to handle this logic. You don't need to validate the editor while the user is typing, so set the editor ValidateOnTextInput property to False. To validate the editor when the user presses the Enter key, set the ValidateOnEnterKeyPressed property to True.

The results of the code you created are below.

Use the same approach to customize the LastName, Email, Password, Birthday, Gender editor fields.

It is not necessary to check if the ConfirmPassword editor field is non-empty, because the validation here implies checking if the ConfirmPassword box matches the string in the Password box. However, for the ConfirmPassword, it makes sense to validate input values as the end-user types. Simply set the editor's ValidateOnTextInput property to True.

It is also necessary to have the Register button disabled when validation errors are present. It is easy to implement this behavior with DXEditors. The ValidationService class supports catching validation errors within a specified visual container. To use this feature, set the ValidationService.IsValidationContainer attached property to True on the parent LayoutControl visual element for the editors. After doing so, bind the IsEnabled property of the Register button to the ValidationService.HasValidationError attached property.

When the validation fails, the ValidationService.HasValidationError attached property returns the True value, which is assigned to the Button.IsEnabled property as False by the BooleanNegationConverter.

Expanded See Also

Is this topic helpful?​​​​​​​