我有这段代码使用了 Bootstrap 和 Razor，这是一个验证空字段的动态表单。代码是：
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<link href="~/Content/css/materialize.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap4.0.css" rel="stylesheet" />
<link href="~/Content/css/estilos.css" rel="stylesheet" />
<link href="~/Content/css/custom.css" rel="stylesheet" />
@{
Html.EnableClientValidation(true);
Html.EnableUnobtrusiveJavaScript(true);
}
<script type="text/html" id="htmlCalificacionSeguridad">
<td>
<div class="form-group">
@Html.TextBoxFor(model => model.Url,
new { htmlAttributes = new { @class = "form-control", type = "url" } })
@Html.ValidationMessageFor(model => model.Url, null, new { @class = "text-danger" })
</div>
</td>
<td>
<a class="delete" title=@Recursos.Lenguaje.Eliminar data-toggle="tooltip" id="btnEliminarCalificacionSeguridad">
<i class="material-icons"></i>
</a>
</td>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdicionarCalificacionSeguridad").click(function () {
var index = $("#tablaCalificacionSeguridad tbody tr:last-child").index();
var htmlCalificacionSeguridad = document.getElementById('htmlCalificacionSeguridad').innerHTML;
var row = '<tr>' + htmlCalificacionSeguridad + '</tr>';
$("#tablaCalificacionSeguridad").append(row);
});
$(document).on("click", "#btnEliminarCalificacionSeguridad", function () {
var filasDeTabla = $('#tablaCalificacionSeguridad tr').length;
if (filasDeTabla > 2) {
$(this).parents("tr").remove();
}
});
function InsertarHtmlCalificacionSeguridad() {
var htmlCalificacionSeguridad = document.getElementById('htmlCalificacionSeguridad').innerHTML;
$("#trParaCrearCalificacionSeguridad").append(htmlCalificacionSeguridad);
}
@if (Model.calificacionSeguridad.ListaCalificacionSeguridad.Count == 0)
{
@:InsertarHtmlCalificacionSeguridad();
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>@Recursos.Lenguaje.CalificaciónSeguridad</title>
</head>
<body>
<div class="ig-header">
<h3 class="v-titulo">@Recursos.Lenguaje.CalificaciónSeguridad</h3>
@using (Html.BeginForm("Crear", "CalificacionSeguridad", FormMethod.Post, new { @id = "formularioCrearCalificacionSeguridad", @class = "formularioCrearCalificacionSeguridad", @name = "formularioCrearCalificacionSeguridad" }))
{
<div class="v-formulario">
<div class="v-selector">
<div class="table-wrapper">
<table class="table table-bordered" id="tablaCalificacionSeguridad">
<caption style="visibility:hidden">Calificación Seguridad</caption>
<thead>
<tr>
<th id=""> @Recursos.Lenguaje.Url</th>
</tr>
</thead>
<tbody>
@if (Model.calificacionSeguridad.ListaCalificacionSeguridad.Count > 0)
{
foreach (var itemCalificacionSeguridad in Model.calificacionSeguridad.ListaCalificacionSeguridad)
{
<tr>
<td>
<div class="form-group">
@Html.Hidden("itemUrl",
Model.Url = itemCalificacionSeguridad.Url)
@Html.TextBoxFor(model => model.Url,
new { htmlAttributes = new { @class = "form-control", @type = "url" } })
@Html.ValidationMessageFor(model => model.Url, null, new { @class = "text-danger" })
</div>
</td>
<td>
<a class="delete" title=@Recursos.Lenguaje.Eliminar data-toggle="tooltip"
id="btnEliminarCalificacionSeguridad">
<i class="material-icons" aria-hidden="true"></i>
</a>
</td>
</tr>
}
}
else
{
<tr id="trParaCrearCalificacionSeguridad">
</tr>
}
</tbody>
</table>
<div class="col-md-2 offset-md-10">
<button type="button" class="btn btn-info add-new" id="btnAdicionarCalificacionSeguridad"> @Recursos.Lenguaje.Adicionar</button>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-8">
<div class="v-formulariobotones">
<div class="row">
<div class="col-md-6">
<a class="v-btn-segundario v-btn" data-dismiss="modal" aria-label="Close"
href="@Url.Action("Editar", "Solucion",
new {
id = Model.IdSolucion, vista = "_FormularioCreacionEdicion"
})">
@Recursos.Lenguaje.Cancelar
</a>
</div>
<div class="col-md-6">
<button class="v-btn-principal v-btn" type="submit">
@Recursos.Lenguaje.Aceptar
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/custom-validator")
}
</body>
</html>
但它不会验证动态表单中的所有字段（此代码版本仅验证一个字段）。它只验证第一行，当添加另一行时，它不验证空字段。 我该如何解决？
