Question

我使用以下方法重置表单后遇到问题：

$(".cancel").click(function () {
        validator.resetForm();
        $(':input', '#MyForm')
            .not(':button, :submit, :reset, :hidden')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
        //OR
        document.getElementById('MyForm').reset();
});

当我再次点击“保存”时，不再需要必填字段，表单会回发。即使重置后，如何让表单重新验证？

这是一个简单的例子，因为我只是重置验证和表单，但在其他页面上我必须手动操作某些字段，所以我需要这种方式重置表单才能工作。

这是一个MVC创建的表单，如果它有任何区别

有什么建议吗？

编辑：经过一些试验和错误后，似乎问题不在于直接resetForm代码，而在于其他问题。

在控制台中，我收到以下javascript错误：

SyntaxError: invalid label

和警告

Use of attributes' specified attribute is deprecated. It always returns true.

不确定它们是否与我的问题有关，但不确定此时还要做什么。

就我正在使用的脚本而言：

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery-1.8.3.min.js")
@*@Scripts.Render("~/Scripts/jquery-1.9.1.min.js")*@
@Scripts.Render("~/Scripts/jquery-ui-1.9.2.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/jquery-validate-messages.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")
@Scripts.Render("~/Scripts/jquery.jeditable.mini.js")
@Scripts.Render("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.editable.js")
@Scripts.Render("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/TableTools.js")
@Scripts.Render("~/Scripts/Countdown.js")
@Styles.Render("~/Scripts/DataTables-1.9.4/media/css/jquery.dataTables.css")
@RenderSection("scripts", required: false)

1.9.1被注释掉了，因为它在第一次JQuery调用时打破了。这有关系吗？

Answer 1

尝试使用以下方法再次设置验证：

$j.validator.unobtrusive.parse('#MyForm');

修改

您可以尝试使用重置按钮重置表单，将其放在表单中：

<button class="reset-button" type="reset">Reset form</button>

并在.cancel上停用您的事件处理程序。或者将其更改为：

$('.cancel').click(function () { $('.reset-button').click(); });

并隐藏重置按钮，如果您不想显示它。

Answer 2

找到一种方法强制它在提交时重新验证：

$(".cancel").click(function () {
        $('#FormId')[0].reset();
        validator.resetForm();
    });

    $("#submitForm").click(function () {
        if ($("#FormId").valid()) {
            $("#FormId").submit();
        }
    });

现在我不再依赖表单的提交功能来触发验证，而是我自己触发它。

Answer 3

我不知道你为什么要以这种方式重置表单，但只需重置就可以正常工作。 Jquery有一个原生重置

    $(".cancel").click(function () {
        $('#FormId')[0].reset();
     });

并且验证保持顺畅

Answer 4

尝试以下方法：

var validator = $("#FormId").validate();

$(".cancel").click(function () {
    $('#FormId')[0].reset();
    validator.resetForm();
});

示例fiddle

表单重置后JQuery验证无效

4 个答案: