How to add validations such as form input fields are empty when using @using (Html.BeginForm())

Question

I have a VIEW which has a form plus a submit button. I also have a MODEL which I used to create my view but now I really have no idea on how to use JavaScript in such a view which does not have input tags or form tags to check if the input field are empty.

Please help with options i could possible use to validate my fields.

This is my View below

<h2>Index2</h2>

<h5>@ViewBag.Msg</h5>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>BookViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Author, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Author, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Author, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Year, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Year, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Year, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Genre, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Genre, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Genre, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

---

This is my MODEL below where I tried so set validations but did not work

public class BookViewModel {
  [Required(ErrorMessage = "This Name field can not be empty.")]
  [Display(Name = "Title")]

  public string Title { get; set; }

  [Required(ErrorMessage = "This Author field can not be empty.")]
  [Display(Name = "Author")]

  public string Author { get; set; }

  [Required(ErrorMessage = "This Year Published field can not be empty.")]
  [Display(Name = "Year")]

  public string Year { get; set; }

  [Required(ErrorMessage = "This Genre field can not be empty.")]
  [Display(Name = "Genre")]

  public string Genre { get; set; }
}

---

Lastly is my CONTROLLER

 public ActionResult Index2() {

     return View();

 }

 public ActionResult Display(string Title, string Author, string Genre, string Year) {
     BookViewModel NewBook = new BookViewModel();
     NewBook.Title = Title;
     NewBook.Author = Author;
     NewBook.Genre = Genre;
     NewBook.Year = Year;

     myList.Add(NewBook);

     return View(myList);
 }

Answer 1

Add following code in your web config:-

<appSettings>
<add key="ClientValidationEnabled" value="true"/> 
<add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

And Add following scripts in your master page:-

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js">
</script>