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