使用 jquery + razor 页面在动态表单中进行验证时遇到问题

Question

我正在使用包含以下想法的表单，我有课程，每门课程包含一个或 n 个模块。

我创建了一个包含课程名称和模块的表单。保存模块后（点击 guardar modulo）按钮 添加一个额外的模块 被启用，所以你可以添加另一个并保存它. 通过单击 guardar modulo，模块将保存在一个数组中。然后，单击 Crear curso 获取模块数组和课程名称并执行 POST。所以我保存了课程及其模块。

完成字段后，如果按 guardar modulo。模数将如前所述存储。

问题是验证仅在创建课程时应用（单击 crear curso 按钮）
我的想法是，当我也单击 guardar modulo 时必须应用验证，但它没有应用它。为了简单起见，我在验证中添加了模块的第一个字段（moduleName 字段）。

这是我的代码

Index.cshtml

<div class="row">
    <div class="col-md-4">
        <partial name="_AgregarModuloModal" />
        <form>
            <div class="form-group">
                <label for="cursoName">Nombre Curso</label>
                <input type="text"
                       id="cursoName"
                       name="cursoName"
                       class="form-control"
                       placeholder="Ingrese el nombre del curso"
                       required />
            </div>
            <div class="accordion" id="accordion">
                <partial name="_ModuloForm" />
            </div>

            <div class="alert alert-success alert-dismissible fade" id="modulo-added-alert" role="alert">
                El m&oacute;dulo ha sido agregado al curso
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <br />
            <button type="button" id="showModalForm"> Agregar otro m&oacute;dulo</button>
            <br />
            <button type="submit" id="submitBtn" class="btn btn-primary">Crear curso</button>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Volver</a>
</div>

@section Scripts {
    <script>
        var modulos = [];
        var otherModules = 0;

        $(function () {

            $('form').validate({
                rules: {
                    cursoName: {
                        required: true,
                        minlength: 4,
                        maxlength: 16
                    },
                    moduloName: {
                        required: true,
                        minlength: 4,
                        maxlength: 16
                    }
                },
                messages: {
                    cursoName: {
                        required: 'El campo es obligatorio',
                        minlength: 'Debe tener al menos 4 caracteres',
                        maxlength: 'No debe superar 16 caracteres'
                    },
                    moduloName: {
                        required: 'El campo es obligatorio',
                        minlength: 'Debe tener al menos 4 caracteres',
                        maxlength: 'No debe superar 16 caracteres'
                    }
                }
            });

            var previousForm = $('.card-0').clone(true);

            var previousModal = $('#guardar-modulo-modal').clone(true);

            $('#modulo-added-alert').css('display', 'none');

            $('#showModalForm').prop('disabled', true);

            $('#confirm-add-modulo').click(function () {

                var id = 'modulo-0';
                var modName = $('#moduloName').val();
                var modDescripcion = $('#moduloDescripcion').val();
                var modEncuentros = $('#moduloEncuentros').val();
                var modCupo = $('#moduloCupo').val();
                var modCupoTolerancia = $('#moduloCupoTolerancia').val();
                var modFechaInicio = $('#moduloFechaInicio').val();
                var modFechaFin = $('#moduloFechaFin').val();
                var modFechaLimite = $('#moduloFechaLimiteInscripcion').val();
                var modalidad = $('#moduloModalidad :selected').text();

                // check modules here .. Refactor repeated lines.
                const idx = modulos.findIndex(function (mod) {
                    return mod.id === id
                });

                if (idx !== -1) {
                    modulos[idx].nombreModulo = modName;
                    modulos[idx].descripcionModulo = modDescripcion;
                    modulos[idx].encuentrosModulo = modEncuentros;
                    modulos[idx].cupoModulo = modCupo;
                    modulos[idx].cupoTolerancia = modCupoTolerancia;
                    modulos[idx].fechaInicio = modFechaInicio;
                    modulos[idx].fechaFin = modFechaFin;
                    modulos[idx].fechaLimite = modFechaLimite;
                    modulos[idx].modalidadModulo = modalidad;

                } else {

                    modulos.push({
                        id: 'modulo-0',
                        nombreModulo: modName,
                        descripcionModulo: modDescripcion,
                        encuentrosModulo: modEncuentros,
                        cupoModulo: modCupo,
                        cupoTolerancia: modCupoTolerancia,
                        fechaInicio: modFechaInicio,
                        fechaFin: modFechaFin,
                        fechaLimite: modFechaLimite,
                        modalidadModulo: modalidad
                    });
                }

                // bad smell --> codigo repetido line --> 190
                $('#guardar-modulo-modal').modal('hide');
                $('#btn-guardar-modulo').text('Actualizar');
                $('#showModalForm').prop('disabled', false);
                $('#collapseModButton').addClass('collapsed');
                $('#collapseModulo').addClass('collapse');
                $('#collapseModulo').removeClass('show');
                $('#modulo-added-alert').css('display', 'block');
            });

            $('#btn-guardar-modulo').click(function () {
                // save modulo but first perform validation
                $('form').validate({
                    rules: {
                     
                        moduloName: {
                            required: true,
                            minlength: 4,
                            maxlength: 16
                        }
                    },
                    messages: {
                        moduloName: {
                            required: 'El campo es obligatorio',
                            minlength: 'Debe tener al menos 4 caracteres',
                            maxlength: 'No debe superar 16 caracteres'
                        }
                    }
                });
                $('#guardar-modulo-modal').modal('show');
            });

            $('#showModalForm').click(function (evt) {
                evt.preventDefault();
                agregarNuevoModulo();
            });

            function agregarNuevoModulo() {

                var newModuloForm = otherModules === 0
                    ? previousForm.clone(true).insertAfter($('.card-0'))
                    : previousForm.clone(true).insertAfter($('.card-0' + otherModules));

                otherModules += 1;

                $('#showModalForm').prop('disabled', true);

                crearModalAgregarModulo(otherModules);

                $.each($('input', newModuloForm), function (i, item) {
                    $(item).attr('id', $(item).attr('id') + otherModules);
                    $(item).attr('name', $(item).attr('name') + otherModules);
                });

                $.each($('select', newModuloForm), function (i, item) {
                    $(item).attr('id', $(item).attr('id') + otherModules);
                    $(item).attr('name', $(item).attr('name') + otherModules);
                });

                var btnAddModulo = $(newModuloForm).find('#btn-agregar-modulo');

                $(btnAddModulo).attr('id', $(btnAddModulo).attr('id') + otherModules);

                $(newModuloForm).attr('class', $('.card-0').attr('class') + otherModules);

                var collapseModuloButton = ($(newModuloForm).find("#collapseModButton"));

                $(collapseModuloButton).attr('id', $(collapseModuloButton).attr('id') + otherModules);

                $(collapseModuloButton).attr('data-target', '#collapseModulo' + otherModules);

                var collapseForm = $(newModuloForm).find("#collapseModulo")

                $(collapseForm).attr('id', $(collapseForm).attr('id') + otherModules);

                var displayModal = $(newModuloForm).find('#btn-guardar-modulo');

                $(displayModal).attr('id', $(displayModal).attr('id') + otherModules);

                $(displayModal).attr('data-target', '#guardar-modulo-modal' + otherModules);

            }

            function crearModalAgregarModulo(otherModules) {

                var previousModelId = (otherModules - 1) > 0 ? otherModules - 1 : '';

                var clonedModal = previousModal.clone(true).insertAfter('#guardar-modulo-modal' + previousModelId);

                $(clonedModal).attr('id', $(clonedModal).attr('id') + otherModules);

                var saveModuloBtn = $(clonedModal).find('#confirm-add-modulo');

                $(saveModuloBtn).attr('id', $(saveModuloBtn).attr('id') + otherModules);

                $(saveModuloBtn).click(function () {
                    var modName = $('#moduloName' + otherModules).val();
                    var modDescripcion = $('#moduloDescripcion' + otherModules).val();
                    var modEncuentros = $('#moduloEncuentros' + otherModules).val();
                    var modCupo = $('#moduloCupo' + otherModules).val();
                    var modCupoTolerancia = $('#moduloCupoTolerancia' + otherModules).val();
                    var modFechaInicio = $('#moduloFechaInicio' + otherModules).val();
                    var modFechaFin = $('#moduloFechaFin' + otherModules).val();
                    var modFechaLimite = $('#moduloFechaLimiteInscripcion' + otherModules).val();
                    var modalidad = $('#moduloModalidad' + otherModules + ':selected').text();

                    var id = 'modulo-' + otherModules;

                    const idx = modulos.findIndex(function (mod) {
                        return mod.id === id
                    });

                    if (idx !== -1) {
                        modulos[idx].nombreModulo = modName;
                        modulos[idx].descripcionModulo = modDescripcion;
                        modulos[idx].encuentrosModulo = modEncuentros;
                        modulos[idx].cupoModulo = modCupo;
                        modulos[idx].cupoTolerancia = modCupoTolerancia;
                        modulos[idx].fechaInicio = modFechaInicio;
                        modulos[idx].fechaFin = modFechaFin;
                        modulos[idx].fechaLimite = modFechaLimite;
                        modulos[idx].modalidadModulo = modalidad;

                    } else {

                        modulos.push({
                            id: 'modulo-' + otherModules,
                            nombreModulo: modName,
                            descripcionModulo: modDescripcion,
                            encuentrosModulo: modEncuentros,
                            cupoModulo: modCupo,
                            cupoTolerancia: modCupoTolerancia,
                            fechaInicio: modFechaInicio,
                            fechaFin: modFechaFin,
                            fechaLimite: modFechaLimite,
                            modalidadModulo: modalidad
                        });
                    }

                    $('#guardar-modulo-modal' + otherModules).modal('hide');
                    $('#btn-guardar-modulo' + otherModules).text('Actualizar');
                    $('#showModalForm').prop('disabled', false);
                    $('#collapseModButton' + otherModules).addClass('collapsed');
                    $('#collapseModulo' + otherModules).addClass('collapse');
                    $('#collapseModulo' + otherModules).removeClass('show');
                    $('#modulo-added-alert').css('display', 'block');
                });
            }
        });
    </script>
}

_ModuloForm.cschtml

<div class="card card-0">
    <div class="card-header" id="moduloForm">
        <h5 class="mb-0">
            <button class="btn btn-link" id="collapseModButton" type="button" data-toggle="collapse" data-target="#collapseModulo" aria-expanded="true" aria-controls="collapseOne">
                M&oacute;dulo
            </button>
        </h5>
    </div>
    <div id="collapseModulo" class="collapse show" aria-labelledby="moduloForm" data-parent="#accordion">
        <div class="card-body">
            <div class="form-group">
                <label for="moduloName">Nombre Modulo</label>
                <input type="text" id="moduloName" name="moduloName" class="form-control" placeholder="Ingrese el nombre del módulo" required />
            </div>
            <div class="form-group">
                <label for="moduloDescripcion">Referencia</label>
                <input type="text" id="moduloDescripcion" name="moduloDescripcion" class="form-control" placeholder="Ingrese la descripción del modulo" required />
            </div>
            <div class="form-group">
                <label for="moduloEncuentros">Cantidad de encuentros</label>
                <input type="number" id="moduloEncuentros" name="moduloEncuentros" class="form-control" placeholder="Ingrese la cantidad de encuentros" required />
            </div>
            <div class="form-group">
                <label for="moduloCupo">Cupo</label>
                <input type="number" id="moduloCupo" name="moduloCupo" class="form-control" placeholder="Ingrese el cupo máximo" required />
            </div>
            <div class="form-group">
                <label for="moduloCupoTolerancia">Cupo Tolerancia</label>
                <input type="number" id="moduloCupoTolerancia" name="moduloCupoTolerancia" class="form-control" placeholder="Ingrese el cupo de tolerancia" required />
            </div>
            <div class="form-group">
                <label for="moduloFechaInicio">Fecha comienzo</label>
                <input type="date" id="moduloFechaInicio" name="moduloFechaInicio" class="form-control" placeholder="Ingrese la fecha de inicio del modulo" required />
            </div>
            <div class="form-group">
                <label for="moduloFechaFin">Fecha finalizaci&oacute;n</label>
                <input type="date" id="moduloFechaFin" name="moduloFechaFin" class="form-control" placeholder="Ingrese la fecha de finalización de módulo"  required/>
            </div>
            <div class="form-group">
                <label for="moduloFechaLimiteInscripcion">Fecha l&iacute;mite de inscripci&oacute;n</label>
                <input type="date" id="moduloFechaLimiteInscripcion" name="moduloFechaLimiteInscripcion" class="form-control" placeholder="Ingrese la fecha de limite de inscripción" />
            </div>
            <div class="form-group">
                <label for="moduloModalidad">Modalidad</label>
                <select id="moduloModalidad" name="moduloModalidad" class="form-control">
                    <option value="Presencial">Presencial</option>
                    <option value="Presencial">Virtual</option>
                </select>
            </div>
            <div class="form-group">
                <label for="addNewModulo">Guardar M&oacute;dulo</label>
                <button type="button"
                        class="btn btn-primary button_lenga_primary"
                        id="btn-guardar-modulo">
                    Guardar Modulo
                </button>
            </div>
        </div>
    </div>
</div>

它工作但部分工作，如果我单击 Crear Curso 应用验证（见下图）。但是当我点击 Guardar modulo 时，我需要在每个模块中执行验证

这可能吗？我知道代码很乱，但我会在解决验证问题后重构它。

Answer 1

因为Guardar modulo的类型是button而不是submit，所以如果要显示错误信息，需要在[=15]中添加$("form").valid() =]方法。

             $('#btn-guardar-modulo').click(function () {
                // save modulo but first perform validation
                $('form').validate({
                    rules: {
                     
                        moduloName: {
                            required: true,
                            minlength: 4,
                            maxlength: 16
                        }
                    },
                    messages: {
                        moduloName: {
                            required: 'El campo es obligatorio',
                            minlength: 'Debe tener al menos 4 caracteres',
                            maxlength: 'No debe superar 16 caracteres'
                        }
                    }
                });
               
                   if($("form").valid()){
                       //.. modules are saved in an array......
                   }else{
                       //.......
                   }

                   
           });

使用 jquery + razor 页面在动态表单中进行验证时遇到问题

Trouble with validation in dynamic forms with jquery + razor pages

javascript

jquery

asp.net-core

razor-pages