Unobtrusive validation demo

Awesome controls are designed to support jquery.validate and unobtrusive validation.
The default date format and decimal separator are set in aweUtils.js init method (if jquery.validate is referenced, aweUtils.init is called by Html.Awe().Init() in _Layout.cshtml).
 
  •  

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>
<h4>click the submit button to see the validation</h4>

@section scriptsBeforeInit {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js" integrity="sha512-KFHXdr2oObHKI9w4Hv1XPKc898mE4kgYx58oqsc/JqqdLMDI4YjOLzom+EMlW8HFUd0QfjfAvxSL6sEq/a42fQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/4.0.0/jquery.validate.unobtrusive.min.js" integrity="sha512-xq+Vm8jC94ynOikewaQXMEkJIOBp7iArs3IhFWSWdRT3Pq8wFz46p+ZDFAR7kHnSFf+zUv52B3prRYnbDRdgog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
}

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)]
[DisplayName("Textbox")]
public string Name { get; set; }

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

[Required]
[UIHint("Autocomplete")]
[AweMeta("placeholder", "try Mango")]
[AweMeta("controller", "Data")]
[AweMeta("action", "MealAutocomplete")]
[DisplayName("Autocomplete")]
public string MealAuto { get; set; }

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

[Required]
[AweMeta("Placeholder", "date and time")]
[DisplayName("DateTimePicker")]
[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")]
[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")]
[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