使用@using(Html.BeginForm())时,如何添加表单输入字段等验证是空的

时间:2018-04-17 06:18:57

标签: javascript html asp.net

我有一个VIEW,它有一个表单和一个提交按钮。 我还有一个用于创建视图的MODEL,但现在我真的不知道如何在没有输入标签或表单标签的视图中使用JavaScript来检查输入字段是否为空。

请帮助我提供可用于验证字段的选项。

  

这是我的观点

<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>
}
  

这是我下面的模型,我尝试了这样设置验证但没有工作

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; }
}
  

最后是我的控制器

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

1 个答案:

答案 0 :(得分:0)

在您的网络配置中添加以下代码: -

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

在母版页中添加以下脚本: -

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