使用带有 Gritter 通知的 jQuery Validate答案

【问题标题】：Using jQuery Validate with Gritter Notification使用带有 Gritter 通知的 jQuery Validate
【发布时间】：2013-10-08 03:52:20
【问题描述】：

我在使用带有“e.preventDefault();”的 jquery 通知 formReset() 时遇到问题和磨砂通知。在我的代码中，我将 eventAdd() 函数调用到验证器的 submitHandler 中。在 eventAdd 函数中，我正在调用 grinter 通知。如果我删除了 e.preventDefault()，除了表单重置部分，一切正常。当我删除它时，表单不会重置，提交后所有内容都显示为绿色。下面是 formReset 和 eventAdd 函数的代码（它们都包含在 $(document).ready 函数中，为简单起见，删除了代码中不相关的部分）。

var form1 = $('#form1');
var error1 = $('.alert-error', form1);
var success1 = $('.alert-success', form1);

var validator = form1.validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-inline', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",
    rules: {
        title: {
            minlength: 2,
            required: true
        },
        description: {
            minlength: 2,
            required: true
        },
        Date: {
            required: true,
            trDate: true
        },
        time_Begin: {
            required: true,
            trHour: true,
        },
        time_End: {
            required: true,
            trHour: true,
        }
    },

    errorPlacement: function (error, element) {
        if (element.next().is('.add-on')) {
            error.addClass('class1').insertAfter(element.next('.add-on'));
        } else {
            error.insertAfter(element);
        }
    },

    invalidHandler: function (event, validator) { //display error alert on form submit              
        success1.hide();
        error1.show();
        App.scrollTo(error1, -200);
    },

    highlight: function (element) { // hightlight error inputs
        $(element)
            .closest('.help-inline').removeClass('ok'); // display OK icon
        $(element)
            .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
    },

    unhighlight: function (element) { // revert the change done by hightlight
        $(element).closest('.control-group').removeClass('error'); // set error class to the control group
    },

    success: function (label) {
        label.addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
        .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
    },

    submitHandler: function (form) {
        eventAdd();
    }
});

function eventAdd() {
    $.gritter.add({
         title: 'SUCCESS!',
         text: 'Event saved successfully.',
         sticky: false,
         time: '10000'
    })

    e.preventDefault();   // That is preventing the gritter notification
    validator.resetForm();
}

我想不出任何东西可以同时保持 gritt 和成功的 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>

【问题讨论】：

这不是preventDefault() 的用途。它用于防止某些事件的默认行为，例如单击锚链接时停止历史记录。当您忽略将 event (e) 参数传递给函数时，它什么也不做。请参阅文档：api.jquery.com/event.preventDefault
还显示更完整的代码演示。（您的 HTML 标记在哪里？）
当我删除 e.preventDefault() 时，表单不会在提交时重置。当它在那里时，它就起作用了。我将尝试稍微简化代码并更新问题。只需一分钟。
其实这里的 e.preventDefault() 函数是防止页面提交后重新加载。当我删除它页面提交并重新加载。这就是为什么我认为表单正在重置:(实际上，它在回发后得到了页面加载状态。我想我的问题是 resetForm 函数，然后......
底线是您没有正确使用preventDefault() 并且您的页面已损坏。我看不到足够的代码来解释您的观察结果，但是在定期提交时，默认情况下页面会重新加载，并且由于插件的 submitHandler，JavaScript 错误也可以防止这种情况发生。

标签： jquery jquery-validate preventdefault gritter

【解决方案1】：

1) 您对e.preventDefault() 的使用不正确且不必要。如果你只是想阻止常规的表单提交，那么在submitHandler回调函数的末尾加上一个return false。

    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

3) The plugin's resetForm() method 仅用于重置验证...删除任何错误消息并将表单返回到其初始验证状态。但是，它不会从字段中删除任何数据条目。

编辑：因为你只是从submitHandler 调用它，它永远不会做任何事情。那是因为submitHandler 只在有效表单上触发。

如果要清除字段，请添加一行 $('form').get(0).reset()。

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
}

工作演示：http://jsfiddle.net/t3dtG/

编辑：.resetForm() 仅用于重置验证（删除未解决的错误消息）。我删除了上面的.resetForm()，因为在这种情况下它是多余的。 submitHandler 仅在表单有效时触发，因此 resetForm() 无事可做。

【讨论】：

$('form').get(0).reset();这就是我解决表单条目重置的方法。但是 validator.resetForm();在我的情况下什么都不做。我通过 $('.control-group').removeClass('error').removeClass('success'); 从控制组 div 中删除类来解决错误和成功着色问题；代码。不过感谢您的帮助！您为我指明了正确的方向:) 为什么您认为 validator.resetForm();没有成功？
@ilter，正如我在回答中所解释的那样，它是验证器的重置方法......它只删除未完成的验证消息并重置表单验证......它工作正常但你认为它不起作用，因为您在表单上没有错误。换句话说，它永远不会在您的情况下做任何事情，因为 submitHandler 仅在表单有效时触发。