1

现在我Save在一个大/大表单上有一个按钮，里面有很多输入元素（~ 500 个输入）。这些输入是通过 AJAX 加载的，其中很大一部分是隐藏输入。

单击Save按钮时，我调用：

// Save button click
$("#save").click(function ()
{
    var button = $(this);

    button.button('loading');

    if($("form").valid())
    {
        ... AJAX Post here ...
    }
    else
    {
        button.button('reset');
    }
}

问题是Twitter Bootstrap 按钮Loading提供的动画不会触发，因为它非常密集并且阻塞了 UI 线程。我测试了它删除了对的调用，并且加载动画按预期显示。$("form").valid()$("form").valid()

我想Loading在处理表单时看到动画。现在动画的方式只是在代码通过时闪烁$("form").valid()......用户几乎看不到它。

有没有什么简单的方法可以让我在 jQuery 验证功能工作时给Loading按钮一些时间？valid()

4

1 回答 1

0

我设法以不同的方式解决了这个问题......

我没有用数百个输入字段验证整个表单（一个耗时的过程），而是只验证修改后的字段，也就是说，我调用$("form").validate().element(this)，其中this输入元素的值被用户修改了。

使用jQuery我们可以有这样的东西：

// Save button click
$("#save").click(function ()
{
    var button = $(this);

    button.button('loading');

    // Selecting only Questions that had their answers modified...
    var answers = // Your logic here to select the modified input fields

    var valid = true;           

    answers.each(function ()
    {
        $(this).find("textarea:not(:disabled)").each(function ()
        {
            if (!$("form").validate().element(this))
            {
                $(this).focus();

                valid = false;

                return;
            }
        });
    });

    // If any of the answers is invalid return with validation messages...
    if (!valid)
    {
        // Resetting Bootstrap's button back to it's original state
        button.button('reset');

        return;
    }

    ... // Do the AJAX POST here
}
于 2013-06-13T13:25:53.073 回答