OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.46k stars 2.41k forks source link

Client-side validation of the form elements #3980

Open domonkosgabor opened 5 years ago

domonkosgabor commented 5 years ago

In Orchard 1.x, you have the ability to add validation rules to form elements when building the form. For example, you can have the required, minimum and max length attributes, use a custom validation message and decide to show a custom validation message instead. We can also add a regular expression here too.

In Orchard Core, you cannot have validation for the input fields in this way when using the OrchardCore.Forms module. One solution is to use a ViewModel with attributes that come from the System.ComponentModel.DataAnnotations namespace and when the form has been submitted, you can check the ModelStateDictionary for errors using the IsValid property.

.NET Core uses the jQuery Unobtrusive Validation script to prevent submissions until the form is valid, ergo, it's the recommended way to use client-side validation. We could also provide a way for users to turn on/off the client-side validation for every input elements, that has validation enabled to prevent an unnecessary form post to a server and have a better user experience when working with forms.

sebastienros commented 5 years ago

This should be defined on each widget. With an option to use it or not. Doesn't have to be using jquery though, it might conflict with the theme, as it will need to use some custom js. There could be some theming issues otherwise. But at the same time, any client-side validation will require some common framework to render the issues consistently,