Unobtrusive validation demo

Unobtrusive client validation using ovld.js and ovld.unobtrusive.js
Client validation will trigger on input and change for each individual editor, also for all editors when clicking the submit button.
Validation rules are being read from the unobtrusive html attributes which are generated by the asp.net core library based on the validation attributes applied on the ViewModel properties.
 
  •  

click the submit button to see the validation

Unobtrusive/Index.cshtml
    @using (Html.BeginForm())
    {
        @Html.EditorFor(o => o.Name)
        @Html.EditorFor(o => o.Number)
        @Html.EditorFor(o => o.MealAuto)
        @Html.EditorFor(o => o.Date)
        @Html.EditorFor(o => o.DateTime1)
        @Html.EditorFor(o => o.DateTimeSeconds1)
        @Html.EditorFor(o => o.Time1)
        @Html.EditorFor(o => o.TimeSeconds1)

        <div style="min-height: 187px">
            @Html.EditorFor(o => o.Categories)
        </div>
        <div style="min-height: 187px">
            @Html.EditorFor(o => o.Category2)
        </div>

        @Html.EditorFor(o => o.CategoryFo)
        @Html.EditorFor(o => o.Meal)
        @Html.EditorFor(o => o.Meals)
        @Html.EditorFor(o => o.MealsOdd)
        @Html.EditorFor(o => o.MealsOddFavs)
        @Html.EditorFor(o => o.CategoryBgrId)
        @Html.EditorFor(o => o.CategoriesBgcIds)
        @Html.EditorFor(o => o.CategoriesMultiIds)
        @Html.EditorFor(o => o.ColorId)
        @Html.EditorFor(o => o.MealComboId)
        @Html.EditorFor(o => o.Organic)
        @Html.EditorFor(o => o.Organic2)
        @Html.EditorFor(o => o.Organic3)
        @Html.EditorFor(o => o.OrganicSim)
        @Html.AntiForgeryToken()
        <div class="esubmit">
            <input type="submit" value="submit" class="awe-btn" />
        </div>
    }
</div>
<h3>click the submit button to see the validation</h3>

ViewModels/Input/UnobtrusiveInput.cs
using Omu.AwesomeMvc;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace AweCoreDemo.ViewModels.Input
{
    public class UnobtrusiveInput
    {
        [Required]
        [AweMeta("placeholder", "write something")]
        [AweMeta("maxLength", 13)]
        [AweMeta("ClearButton", true)]
        [DisplayName("Textbox")]
        [MaxLength(13)]
        [MinLength(2)]
        public string Name { get; set; }

        [Required]
        [AweMeta("placeholder", "only numbers here")]
        [AweMeta("decimals", 2)]
        [AweMeta("ClearButton", true)]
        [DisplayName("Numeric textbox")]
        public float? Number { get; set; }

        [Required]
        [UIHint("Autocomplete")]
        [AweMeta("placeholder", "try a")]
        [AweMeta("controller", "Data")]
        [AweMeta("action", "MealAutocomplete")]
        [DisplayName("Autocomplete")]
        [AweMeta("ClearButton", true)]
        [StringLength(10, MinimumLength = 3)]
        public string MealAuto { get; set; }

        [Required]
        [AweMeta("Placeholder", "pick a date")]
        [AweMeta("ClearButton", true)]
        [DisplayName("DatePicker")]
        public DateTime? Date { get; set; }

        [Required]
        [AweMeta("Placeholder", "date and time")]
        [DisplayName("DateTimePicker")]
        [AweMeta("ClearButton", true)]
        [UIHint("DateTimePicker")]
        public DateTime? DateTime1 { get; set; }

        [Required]
        [AweMeta("Placeholder", "date and time")]
        [DisplayName("DateTimePicker with seconds")]
        [UIHint("DateTimePickerSeconds")]
        public DateTime? DateTimeSeconds1 { get; set; }

        [Required]
        [DisplayName("TimePicker")]
        [UIHint("TimePicker")]
        public DateTime? Time1 { get; set; }

        [Required]
        [DisplayName("TimePicker with seconds")]
        [UIHint("TimePickerSeconds")]
        public DateTime? TimeSeconds1 { get; set; }

        [Required]
        [UIHint("AjaxCheckboxList")]
        [AweUrl(Action = "GetCategories", Controller = "Data")]
        [DisplayName("CheckboxList")]
        public IEnumerable<int> Categories { get; set; }

        [Required]
        [UIHint("AjaxRadioList")]
        [AweUrl(Action = "GetCategories", Controller = "Data")]
        [DisplayName("RadioList")]
        public int? Category2 { get; set; }

        [Required]
        [DisplayName("Dropdown")]
        [AweMeta("ClearButton", true)]
        [AweUrl(Action = "GetCategoriesFirstOption", Controller = "Data")]
        [UIHint("AjaxDropdown")]
        public int? CategoryFo { get; set; }

        [Required]
        [UIHint("Lookup")]
        [AweMeta("ClearButton", true)]
        [DisplayName("Lookup")]
        public int? Meal { get; set; }

        [Required]
        [UIHint("MultiLookup")]
        [AweMeta("ClearButton", true)]
        [DisplayName("MultiLookup")]
        public IEnumerable<int> Meals { get; set; }

        [Required]
        [UIHint("DropdownList")]
        [DisplayName("DropdownList")]
        [AweMeta("ClearButton", true)]
        [AweUrl(Action = "GetAllMeals", Controller = "Data")]
        public int? MealsOdd { get; set; }

        [Required]
        [UIHint("DropdownListFavs")]
        [DisplayName("DropdownList Favs")]
        [AweUrl(Action = "GetAllMeals", Controller = "Data")]
        public int? MealsOddFavs { get; set; }

        [Required]
        [UIHint("ButtonGroupRadio")]
        [DisplayName("ButtonGroup")]
        [AweUrl(Action = "GetCategories", Controller = "Data")]
        public int? CategoryBgrId { get; set; }

        [Required]
        [UIHint("ButtonGroupCheckbox")]
        [DisplayName("ButtonGroup Multi")]
        [AweUrl(Action = "GetCategories", Controller = "Data")]
        public int[] CategoriesBgcIds { get; set; }

        [Required]
        [UIHint("Multiselect")]
        [DisplayName("Multiselect")]
        [AweUrl(Action = "GetCategories", Controller = "Data")]
        public int[] CategoriesMultiIds { get; set; }

        [Required]
        [UIHint("ColorDropdown")]
        [DisplayName("ColorPicker")]
        public string ColorId { get; set; }

        [Required]
        [UIHint("Combobox")]
        [DisplayName("Combobox")]
        [AweUrl(Action = "GetAllMeals", Controller = "Data")]
        public string MealComboId { get; set; }

        [DisplayName("Checkbox")]
        public bool Organic { get; set; }

        [UIHint("ChkEmpVal")]
        [Required(ErrorMessage = "This must be checked, in order to submit the form")]
        [DisplayName("Checkbox (Required)")]
        public bool Organic2 { get; set; }

        [UIHint("TogglEmpVal")]
        [Required(ErrorMessage = "This must be Yes, in order to submit the form")]
        [DisplayName("Toggle Button")]
        public bool Organic3 { get; set; }

        [UIHint("SchkEmpVal")]
        [Required(ErrorMessage = "This must be checked, in order to submit the form")]
        public bool OrganicSim { get; set; }
    }
}



Comments