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.
 
  •  
please select
Yes
No

click the submit button to see the validation 

show code
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>




Comments