我得到了 Bootstrap 对话框中显示的以下视图。当我单击提交时,选项卡 1 中的字段得到验证。我填写了它们,然后再次单击提交,但选项卡 2 和 3 中的字段未经过验证,即使它们被标记为必填项。似乎可见字段是正在验证的字段。
如何使用引导选项卡验证表单?
@model Modelos.JuegoDTO
@{
Layout = null;
}
@using (Ajax.BeginForm("agregar", "generos", new AjaxOptions() { HttpMethod = "POST" },
new
{
id = "AgregarForm",
enctype = "multipart/form-data"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="tabbable" id="tabs-735134">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-444828" data-toggle="tab">General</a>
</li>
<li>
<a href="#panel-391505" data-toggle="tab">Imagenes</a>
</li>
<li>
<a href="#panel-391506" data-toggle="tab">Video</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-444828">
@* <fieldset>
<legend>General</legend>*@
<div class="row-fluid">
<div class="span2">
@Html.LabelFor(model => model.Nombre)
</div>
<div class="span10">
@Html.EditorFor(model => model.Nombre)
@Html.ValidationMessageFor(model => model.Nombre)
</div>
</div>
<div class="row-fluid">
<div class="span2">
@Html.LabelFor(model => model.Descripcion)
</div>
<div class="span10">
@Html.EditorFor(model => model.Descripcion)
@Html.ValidationMessageFor(model => model.Descripcion)
</div>
</div>
<div class="row-fluid">
<div class="span2">
@Html.LabelFor(model => model.GeneroId)
</div>
<div class="span10">
@Html.DropDownListFor(model => model.GeneroId,
new SelectList(Model.ListaGeneros, "Id", "Nombre"), "Seleccione un genero")
@Html.ValidationMessageFor(model => model.GeneroId)
</div>
</div>
<div class="row-fluid">
<div class="span2">
@Html.LabelFor(model => model.ConsolaId)
</div>
<div class="span10">
@Html.DropDownListFor(model => model.ConsolaId,
new SelectList(Model.ListaConsolas, "Id", "Nombre"), "Seleccione una consola")
@Html.ValidationMessageFor(model => model.ConsolaId)
</div>
</div>
<div class="row-fluid">
<div class="span2">
@Html.LabelFor(model => model.Activo)
</div>
<div class="span10">
@Html.EditorFor(model => model.Activo)
@Html.ValidationMessageFor(model => model.Activo)
</div>
</div>
@*</fieldset>*@
</div>
<div class="tab-pane" id="panel-391505">
@* <fieldset>
<legend>Imagenes</legend>*@
<div class="row-fluid">
<a href="#" id="add">Agregar Imagen</a>
@Html.LabelFor(model => model.ListaImagenes)
@Html.ValidationMessageFor(model => model.ListaImagenes)
<div id="divImagenesDTO">
</div>
</div>
@*</fieldset>*@
</div>
<div class="tab-pane" id="panel-391506">
@* <fieldset>
<legend>Video</legend>*@
<div class="row-fluid">
<div class="span4">
@Html.LabelFor(model => model.VideoYouTube)
</div>
<div class="span8">
@Html.EditorFor(model => model.VideoYouTube)
@Html.ValidationMessageFor(model => model.VideoYouTube)
</div>
</div>
@*</fieldset>*@
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button id="btnSalvar" class="btn btn-primary" type="submit">Salvar</button>
</div>
</div>
</div>
}
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/juegos-imagenes.js"></script>
<script src="~/Scripts/juegos-modal.js"></script>