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!");
}
});