HTML 5 Input Validation and Keyboard Support (Now available in v14.2)

Thinking Out Loud
17 November 2014

As you'll discover in the coming weeks, our client-side HTML5 widgets have been improved both quantitatively and qualitatively. With v14.2,  DevExtreme UI widgets will include full keyboard support and offer input validation using our new Validation engine.

Keyboard Support

To improve end-user productivity and meet government accessibility requirements, DevExtreme widgets can now be fully controlled with the keyboard. For instance, items displayed within our HTML 5 SelectBox widget may be selected by use of the mouse, gestures or keyboard. 

HTML 5 Keyboard Support for Client-Side Widgets

Hotkeys

To simplify adoption and reduce learning curves for end-users, DevExtreme v14.2 client-side widgets will support today's most popular hotkeys.

TabIndex and Focused Appearance

With this update, you will be able to control widget tab order via a new tabIndex option and customize focused appearance when needed.


Input Validation

In previous versions, DevExtreme supported integration of third-party input validation frameworks. With this release, we've chosen to ship our own input validation engine with a powerful and straightforward API - one that has been tuned to deliver the best possible UX and one that is consistent across all of our shipping themes.

HTML 5 Input Validation for Client-Side Widgets

dxValidator - This component is seamlessly integrated with our editors and validates values against a predefined set of rules.
You can choose from standard restrictions (such as “required”,”stringLength” etc.) or implement your own logic with any level of detail, including remote validation.


Model Validation

People familiar with MVC/MVVM, often prefer to validate the entire Model object and not just the editors on a page. This allows one to separate validation logic from the UI, reuse it between multiple views and easily unit-test the implementation. As you might imagine, we fully support this approach as well - you can embed validation rules into your Knockout Model and validate before the action.

var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{ type: 'required', message: 'We need your credentials' }]
        }
    }),
 
DevExpress.validationEngine.registerModelForValidation(viewModel);

ko.applyBindings(viewModel);

Customize it Your Way

The DevExtreme Validation engine can be fully customized. You can use it for any third-party widget or use its UI implementation in conjunction with any custom validation engine.


As always, we welcome your comments and feedback. Let us know what you think.

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.