使用jQuery验证和Gritter通知

我在使用带有“e.preventDefault（）；”的jquery通知formReset（）和gritter通知时遇到问题。在我的代码中，我调用eventAdd（）函数到验证器的submitHandler。在eventAdd函数中，我调用了一个gritter通知。如果我删除e.preventDefault（），除了表单重置部分之外，其他一切都可以正常工作。当我删除它时，表单不会得到重置，提交后所有内容都显示为绿色。 下面是formReset和eventAdd函数的代码（它们都用$（document）包装。为了简单起见，删除了ready函数和代码中不相关的部分）

我想不出任何方法可以让GRADTER和成功的resetForm函数都工作。有什么想法吗

编辑：HTML代码

<form id="form1">
    <div class="alert alert-error hide">
        <button class="close" data-dismiss="alert"></button>
        Please fix the error fields.
    </div>
    <div class="alert alert-success hide">
        <button class="close" data-dismiss="alert"></button>
        All fields are OK. You can save your event.
    </div>

    <div class="control-group">
        <div class="controls">
            <input id="event_title" name="title" data-required="1" type="text" value="" class="m-wrap span11 tooltips" placeholder="Event Title..." data-trigger="hover" data-original-title="Write your event description." data-placement="bottom" />

        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <textarea id="event_description" name="description" data-required="1" class="m-wrap span11 tooltips" placeholder="Event Description..." rows="5" style="resize: vertical;" data-trigger="hover" data-original-title="Etkinlik açıklamanızı yazarken HTML etiketleri kullanabilirsiniz. Açıklamanızı en fazla 1000 karakter (HTML etiketleri dahil) olarak girin." data-placement="bottom"></textarea>

        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_date_picker_trigger">
                <input id="ui_date_picker_change_date" name="Date" data-required="1" placeholder="Event Date" class="m-wrap span6" type="text" value="" />
                <span class="add-on"><i class="icon-calendar"></i></span>
            </div>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_time_picker_trigger_Begin">
                <input id="ui_date_picker_change_time_Begin" name="time_Begin" placeholder="Event Begins" class="m-wrap span6" type="text" value="" /><span class="add-on"><i class="icon-time"></i></span>
            </div>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_time_picker_trigger_End">
                <input id="ui_date_picker_change_time_End" name="time_End" placeholder="Event Ends" class="m-wrap span6" type="text" value="" data-placement="top" /><span class="add-on"><i class="icon-time"></i></span>
            </div>
        </div>
    </div>

    <hr />
    <button id="event_add" type="submit" class="btn blue tooltips" style="float: left;"><i class="icon-ok"></i>&nbsp;Add Event</button>
    <button id="event_nullify" type="submit" class="btn yellow tooltips" style="float: right;"><i class="icon-refresh"></i>&nbsp;Cancel</button>
</form>

请修复错误字段。
所有字段都可以。您可以保存事件。

添加事件
取消

1）您对的使用不正确且不必要。如果您只是想阻止常规表单submit，那么在

submitHandler

回调函数的末尾放置一个

returnfalse

    submitHandler: function (form) {
        eventAdd();
        return false; // block form submit
    }

2） 规则选项后缺少逗号

    rules: {
        title: {
            minlength: 2,
            required: true
        },
        description: {
            minlength: 2,
            required: true
        }
    }, // <-- this comma was missing

工作演示：

---

编辑：

.resetForm（）

仅用于重置验证（删除未完成的错误消息）。我删除了上面的

.resetForm（）

，因为它在这个上下文中是多余的。

submitHandler

仅在表单有效时触发，因此，

resetForm（）

无需执行任何操作。

这不是

preventDefault（）

的目的。它用于防止某些事件的默认行为，例如在单击锚链接时停止历史记录。当您忽略将

事件

（

e

）参数传递到函数中时，它不会起任何作用。请参阅文档：同时显示更完整的代码演示。（HTML标记在哪里？）。当它在那里时，它就起作用了。我将尝试稍微简化代码并更新问题。只需一分钟。实际上，这里的e.preventDefault（）函数防止页面在提交后重新加载。当我删除它时，页面提交并重新加载。这就是为什么我认为表单得到了重置：（实际上，它是在回发后得到它的页面加载状态。我想我的问题是resetForm函数，那么…底线是你没有使用

preventDefault（）

正确，您的页面被破坏。我看不到足够的代码来解释您的观察结果，但在定期提交时，默认情况下会重新加载页面，并且由于插件的

submitHandler

，JavaScript错误也可以防止这种情况发生。$（'form'）.get（0）.reset（）；是我解决表单条目重置的方法。但是validator.resetForm（）；在我的情况下什么也不做。我通过将类从控制组divs中按$（'.control group'）删除来解决错误和成功着色。removeClass（'error'）。removeClass（'success'）；代码。不过，感谢您的帮助！您为我指出了正确的方向：）为什么您认为validator.resetForm（）；没有成功？@ilter，正如我在回答中解释的，这是验证器的重置方法。。。它仅删除未完成的验证消息并重置表单验证。。。它工作正常，但您认为它不工作，因为您在表单上没有错误。换句话说，在您的情况下，它永远不会做任何事情，因为

submitHandler

仅在表单有效时触发。

    rules: {
        title: {
            minlength: 2,
            required: true
        },
        description: {
            minlength: 2,
            required: true
        }
    }, // <-- this comma was missing

function eventAdd() {
    $.gritter.add({
       title: 'SUCCESS!',
       text: 'Event saved successfully.',
       sticky: false,
       time: '10000'
    });
    // validator.resetForm();     // reset validation - superfluous here
    $('form').get(0).reset();     // clear the fields
}