使用 jQuery 的引导程序错误警报

Question

我正在尝试使用引导警报显示错误警报消息。如果用户提交表单时某些字段为空，则应显示错误。但是，当我单击提交时，没有显示任何内容。

JS

<script type="text/javascript">
$(document).ready(function () {
    $('form[name="register"]').on("submit", function (e) {
    var email = $(this).find('input[name="email"]');
        if ($.trim(email.val()) === "") {
        e.preventDefault();    
        $("#errorAlert").slideDown(400);  
    } else {

             $("#errorAlert").slideUp(400, function () {     
            email.val("");    
        });
    }
});

$(".alert").find(".close").on("click", function (e) {
    e.stopPropagation();   
    e.preventDefault();    
    $(this).closest(".alert").slideUp(400);  
     });
});
</script>

HTML

<div class="alert hide" id="errorAlert">
<a class="close">×</a>
Oops!!. You may have left some fields empty. Please fill them out.
</div>
<form name="register" action="" method="post">
     <input type="text" name="email" />
     <input type="submit" class="btn" value="Submit" />
    </form>

当我从上面的 div 中删除“隐藏”类时，甚至在提交表单之前就会出现警告消息。如果我然后关闭警报并提交表单，则不会显示警报。我如何让它工作。在此先感谢

Answer 1

在您的$("#errorAlert").slideDown(400) 上，添加.removeClass('hide')

那就是$("#errorAlert").hide().slideDown(400).removeClass('hide')。

我怀疑hide 类有display:none!important。所以我们必须删除这个类。

DEMO fiddle

Answer 2

Demo

jquery

$(document).ready(function () {
    // Run this code only when the DOM (all elements) are ready

    $('form[name="register"]').on("submit", function (e) {
        // Find all <form>s with the name "register", and bind a "submit" event handler

        // Find the <input /> element with the name "username"
        var email = $(this).find('input[name="email"]');
        if ($.trim(email.val()) === "") {
            // If its value is empty
            e.preventDefault(); // Stop the form from submitting
            $("#errorAlert").slideDown(400); // Show the Alert
        } else {
            e.preventDefault(); // Not needed, just for demonstration
            $("#errorAlert").slideUp(400, function () { // Hide the Alert (if visible)
                alert("Would be submitting form"); // Not needed, just for demonstration
                username.val(""); // Not needed, just for demonstration
            });
        }
    });

    $(".alert").find(".close").on("click", function (e) {
        // Find all elements with the "alert" class, get all descendant elements with the class "close", and bind a "click" event handler
        e.stopPropagation(); // Don't allow the click to bubble up the DOM
        e.preventDefault(); // Don't let any default functionality occur (in case it's a link)
        $(this).closest(".alert").slideUp(400); // Hide this specific Alert
    });
});

Answer 3

问题很简单。在这里使用.hide 不是一个好主意，因为它包含display: none，后面跟着!important，因此即使您尝试显示警报，此属性也会覆盖它。

你可以创建一个简单的 CSS：

.hid{
  display:none;
}

将hid 作为类添加到警告框中，而不是hide。

DEMO

Answer 4

您可以简单地删除hide 类并将style="display:none;" 添加到$('#errorAlert') 元素。这样，该元素将不会出现在页面加载中，并且 jQuery 将在使用 slide* 函数时操纵 display 属性。 （它永远不会删除/添加 Bootstrap 的 hide 类。）

见小提琴：http://jsfiddle.net/X2B9h/

Answer 5

更新：http://jsfiddle.net/crw4K/

编辑：更改我的答案，因为我还没有喝咖啡。

好的，所以我对您的代码进行了更改：

我从警报 div 中删除了类 'hide'，并添加了一个带有 'display:none;' 的内联样式标签

另外，我删除了最初的

$(".alert").find(".close")...

并将其更改为

$(".close").on("click"...

编辑：我想我找到了你的问题。 bootstrap 中的 .hide 类是：

display:none !important;

这意味着它优先于元素的所有其他 css。这意味着当您向下滑动时， display:none !important 仍然具有优先权。

您可以完全删除该类，并添加自己的内联样式标记（正如我在回答中所做的那样），或者您可以使用 jquery 删除该类。