验证器 - 不显眼的表单重置不起作用答案

【问题标题】：validator - unobtrusive form reset not working验证器 - 不显眼的表单重置不起作用
【发布时间】：2020-01-16 11:08:44
【问题描述】：

我使用的是 adminlte v 3.0.1。引导

做一些验证器并且不引人注目

卡在重置表单中，例如

edit => 显示模态表单 => 触发验证 => 取消 => 新 => 验证结果仍然存在

我已经试过了

$('#form').trigger('reset') ~ 不做任何事情（不触发任何事情）
$('#form')[0].trigger('reset')~触发器不是函数
document.getElementById('form').reset() ~ 不做任何事情（不触发任何事情）

感谢任何帮助

问候

更新：

HTML 代码

@{
    ViewBag.Title = "Master Currency";
}

<div class="card-header">
    <h3>Currency</h3>
</div>
<div class="card-body">
    <div class="row src-form" style="margin-bottom: 15px;">
        <div class="col-12">
            @{
                Html.RenderPartial("_Search");
            }
        </div>
    </div>
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-1">
            <a href="javascript:void(0)" title="Search" id="btn-toggle-search">
                <i class="fa fa-search-plus custom-fa"></i>
            </a>
        </div>
        <div class="col-1">
            <a href="javascript:void(0)" title="Refresh" id="btn-refresh">
                <i class="fa fa-sync custom-fa"></i>
            </a>
        </div>
        <div class="col-1 offset-9">
            <a href="javascript:void(0)" id="btn-new" class="btn btn-primary">
                <span>New</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <table id="grid">
                <thead>
                    <tr>
                        <th>Currency Code</th>
                        <th>Currency Name</th>
                        <th>Created By</th>
                        <th>Created Time</th>
                        <th>Last Modified By</th>
                        <th>Last Modified Time</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<div class="modal fade"  id="modal-edit">
    <div class="curr-edit">
        @using (Ajax.BeginForm("Save", "Currency", new { area = "Master" },
        new AjaxOptions()
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "curr-edit",
            HttpMethod = "POST",
            OnSuccess = "successSave",
            OnFailure = "failSave"
        }, new { @id = "edit-form" }))
        {
            @Html.AntiForgeryToken()

            @Html.Partial("_Edit")
        }
    </div>
</div>

<div class="modal fade" id="modal-delete">
    <div class="curr-del">
        @using (Ajax.BeginForm("Delete", "Currency", new { area = "Master" },
            new AjaxOptions()
            {
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "curr-del",
                HttpMethod = "POST",
                OnSuccess = "successDelete",
                OnFailure = "failDelete"
            }, new { @id = "delete-form" }))
            {
                @Html.AntiForgeryToken()
                @Html.Partial("_Delete")
            }
            })) 
    </div>
</div>

编辑表单

@model  CurrencyModel


    @Html.HiddenFor(model => model.CurrencyID, new { @id = "curcy-id" })

    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="title-modal"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>       
            <div class="modal-body">
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-4">
                        @Html.LabelFor(model => model.CurrencyCode)
                    </div>
                    <div class="col-8">
                        @Html.TextBoxFor(model => model.CurrencyCode, new { @class = "form-control", @id = "curcy-code" })
                        @Html.ValidationMessageFor(model => model.CurrencyCode, "",  new { @class = "validation-message" })
                    </div>
                </div>
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-4">
                        @Html.LabelFor(model => model.CurrencyName)
                    </div>
                    <div class="col-8">
                        @Html.TextBoxFor(model => model.CurrencyName, new { @class = "form-control", @id = "curcy-name" })
                        @Html.ValidationMessageFor(model => model.CurrencyName, "", new { @class = "validation-message" })
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

JS 代码

$('#grid').DataTable({
    'scrollX': true,
    'scrollY': true,
    'serverSide': true,
    'fixedColumns': true,
    'sScrolling': true,
    'ScrollY': '400px',
    'ScrollX': '800px',
    'bScrollCollapse': true,
    'bSortCellsTop': true,
    "sDom": 'Rfrtlip',
    "dom": '<"top"i>rt<"bottom"lp><"clear">',
    'ajax': {
        'url': '@Url.Action("GetCurrency", "Currency", new { area = "Master" })',
        'type': 'POST',
        'dataType': 'JSON'
    },
    'columns': [
        { 'data': 'CurrencyCode', 'searchable': true, 'autoWidth': true },
        { 'data': 'CurrencyName', 'autoWidth': true },
        { 'data': 'CreatedBy', 'sortable': false, 'autoWidth': true },
        {
            'data': 'CreatedTime', 'autoWidth': true, 'sortable': false, 'render': function (jsonDate) {
                return convertJsonDate(jsonDate);
            }
        },
        { 'data': 'LastModifiedBy', 'autoWidth': true, 'sortable': false, 'sortable': false },
        {
            'data': 'LastModifiedTime', 'autoWidth': true, 'sortable': false, 'render': function (jsonDate) {
                return convertJsonDate(jsonDate);
            }
        },
        {
            'data': 'CurrencyID', 'width': '50px', 'sortable': false , 'className': 'text-center', 'render': function (data) {
                return "<a href='javascript:void(0)' class='btn-edit' title='Edit' data-id=" + data + ">Edit</a>"
            }
        },
        {
            'data': 'CurrencyID', 'width': '50px', 'sortable': false, 'className': 'text-center', 'render': function (data) {
                return "<a href='javascript:void(0)' class='btn-delete' title='Delete' data-id=" + data + ">Delete</a>"
            }
        }
    ]
});
$(document).ready(function () {
    $('#btn-src').click(function () {
        var srcparam = $('#src-type').children('option:selected').data('id');
        if (srcparam === '' || srcparam === undefined || srcparam === null) {
            alert('Pilih kategori pencarian terlebih dahulu!');
            return;
        }
        debugger;
        var srcvalue = $('#src-value').val();
        if (srcvalue === '' || srcvalue === undefined || srcvalue === null){
            alert('Parameter pencarian harus diisi!');
            return;
        }


        oTable = $('#grid').DataTable();

        switch (srcparam) {
            case 'CODE':
                oTable.columns(0).search(srcvalue).draw();
                break;
            case 'NAME':
                oTable.columns(1).search(srcvalue).draw();
                break;
        }
    });

    $('#grid').on('click', 'a.btn-edit', function (e) {
        var param = parseInt($(this).data('id'));
        $.post('@Url.Action("PrepareFormData", "Currency", new { area = "Master" })', { id: param })
            .done(function (obj) {
                switch (obj.Response) {
                    case 'SUCCESS':
                        var validator = $('#edit-form').validate();
                        validator.resetForm();
                        $('#edit-form').trigger('reset');
                        $('#curcy-id').val(obj.Currency.CurrencyID).trigger('change');
                        $('#curcy-code').val(obj.Currency.CurrencyCode).trigger('change');
                        $('#curcy-name').val(obj.Currency.CurrencyName).trigger('change');

                        $('#title-modal').text('Edit Currency');
                        $('#modal-edit').modal('show');                           
                        break;
                    case 'WARNING':
                        toastr.warning(obj.ResponseMsg);
                        break;
                    case 'ERROR':
                        toastr.error(obj.ResponseMsg);
                        break;
                }
            });
    });
    $('#grid').on('click', 'a.btn-delete', function (e) {
        var param = parseInt($(this).data('id'));
        $.post('@Url.Action("PrepareFormData", "Currency", new { area = "Master" })', { id: param })
            .done(function (obj){
                switch (obj.Reponse) {
                    case 'SUCCESS':
                        $('#delete-form').trigger('reset');
                        $('#curcy-id').val(obj.Currency.CurrencyID).trigger('change');

                        $('#modal-delete').modal('show');
                        break;
                    case 'WARNING':
                        toastr.warning(obj.ResponseMsg);
                        break;
                    case 'ERROR':
                        toastr.error(obj.ResponseMsg);
                        break;
                }
            });
    });

    $('#btn-new').click(function () {
        $.post('@Url.Action("PrepareFormData", "Currency", new { area = "Master" })', { id: 0 })
            .done(function (obj) {
                switch (obj.Response) {
                    case 'SUCCESS':                            
                        $('#edit-form').trigger('reset');
                        $('#curcy-id').val(obj.Currency.CurrencyID).trigger('change');

                        $('#title-modal').text('New Currency');
                        $('#modal-edit').modal('show');
                        break;
                    case 'WARNING':
                        toastr.warning(obj.ResponseMsg);
                        break;
                    case 'ERROR':
                        toastr.error(obj.ResponseMsg);
                        break;
                }
            })
    });
});

【问题讨论】：

$('#form').trigger('reset') 应该可以工作。如果不是，那么我们需要查看更完整的 HTML/JS 示例。另外，检查控制台是否有错误
@RoryMcCrossan，更新了代码

标签： javascript jquery asp.net unobtrusive-validation

【解决方案1】：

如果您在 DOM 中不存在表单时尝试重置表单，则可能会出现问题。

尝试在这样的模态打开事件上重置表单。例如idEditModal 是您的模态框的 id。

$('#idEditModal').on('shown.bs.modal', function (e) {
  var $alerts = $('#form');
  $alerts.validate().resetForm();
  $alerts.find('.error').removeClass('error');
})

【讨论】：

您在重置表单后尝试$alerts.find('.error').removeClass('error'); 吗？