Required
The System.ComponentModel.DataAnnotations.RequiredAttribute maps to the required validation method in jQuery Validation.
Here's the model, note that the Required
attribute decorates each property of the model:
using System.ComponentModel.DataAnnotations; namespace jQuery.Validation.Unobtrusive.Native.Demos.Models { public class RequiredModel { [Required] public string TextBox { get; set; } [Required] public string DropDownList { get; set; } [Required] public string RadioButton { get; set; } [Required] public string TextArea { get; set; } } }
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.RequiredModel @using (Html.BeginForm()) { <div class="row"> @Html.LabelFor(x => x.TextBox, "Something must be entered:") @Html.TextBoxFor(x => x.TextBox, true) </div> <div class="row"> @Html.LabelFor(x => x.DropDownList, "An option must be selected:") @Html.DropDownListFor(x => x.DropDownList, true, new List<SelectListItem> { new SelectListItem{ Text = "Please select", Value = "" }, new SelectListItem{ Text = "An option", Value = "An option"} }) </div> <div class="row"> @Html.LabelFor(x => x.RadioButton, "A radio button must be selected:") <label class="radio.inline" for="RequiredString_Yes"> @Html.RadioButtonFor(x => x.RadioButton, true, "Yes", new { id = "RequiredString_Yes" }) Yes </label> <label class="radio.inline" for="RequiredString_No"> @Html.RadioButtonFor(x => x.RadioButton, true, "No", new { id = "RequiredString_No" }) No </label> </div> <div class="row"> @Html.LabelFor(x => x.TextArea, "Something must be entered:") @Html.TextAreaFor(x => x.TextArea, true) </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> }
Here's the HTML that the view generates:
<form action="/Demo/Required" method="post"> <div class="row"> <label for="TextBox">Something must be entered:</label> <input data-msg-required="The TextBox field is required." data-rule-required="true" id="TextBox" name="TextBox" type="text" value="" /> </div> <div class="row"> <label for="DropDownList">An option must be selected:</label> <select data-msg-required="The DropDownList field is required." data-rule-required="true" id="DropDownList" name="DropDownList"> <option value="">Please select</option> <option value="An option">An option</option> </select> </div> <div class="row"> <label for="RadioButton">A radio button must be selected:</label> <label class="radio.inline" for="RequiredString_Yes"> <input data-msg-required="The RadioButton field is required." data-rule-required="true" id="RequiredString_Yes" name="RadioButton" type="radio" value="Yes" /> Yes </label> <label class="radio.inline" for="RequiredString_No"> <input id="RequiredString_No" name="RadioButton" type="radio" value="No" /> No </label> </div> <div class="row"> <label for="TextArea">Something must be entered:</label> <textarea cols="20" data-msg-required="The TextArea field is required." data-rule-required="true" id="TextArea" name="TextArea" rows="2"></textarea> </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> </form>
The errorPlacement
option below is only in place so that radio validations are styled a little nicer.
$("form").validate({ errorPlacement: function($errorLabel, $element) { var $elementToInsertAfter = $element; if ($element.prop("type") === "radio") { $elementToInsertAfter = $element.closest(".controls"); } $errorLabel.insertAfter($elementToInsertAfter); }, submitHandler: function (form) { alert("This is a valid form!"); } });