在表单错误时调用引导程序警报 [英] Calling bootstrap alerts on form error

问题描述

我为警报div使用以下HTML代码：

I have the following HTML code for the alert div:

<div id="formAlert" class="alert">  
  <a class="close" data-dismiss="alert">×</a>  
  <strong>Warning!</strong> Make sure all fields are filled and try again.  
</div>

以及以下JavaScript：

And the following JavaScript:

function validateForm(){
  var x=document.forms['register']['username'].value;
  if (x==null || x=="") {
    alert('This is an alert')
    return false;
        var alertDialog = document.getElementByid("formAlert");
        alertDialog.style.display = "block";
  }
}

代码问题是警报正在显示甚至在调用代码之前就过早。我可以告诉您，当默认的JavaScript警报框弹出时会调用该警报。理想情况下，当调用 validateForm（）时，我希望显示警报。提交表单时，会调用 validateForm（）。

The problem with the code is that the alert is showing prematurely, even before the code is called. I can tell the alert is called when the default JavaScript alert box pops up. Ideally, when validateForm() is called, I want the alert to show up. validateForm() is called when the form is submit.

编辑：根据要求，以下是触发validateForm（）的代码：

EDIT: As requested, here is the code triggering the validateForm():

<form name="register" action="" onSubmit="return validateForm()" method="post">
</form>

现在我已经解决了调用它的问题，如何隐藏div直到它被调用

Now that I've solved the issue of calling it, how do I hide the div until it's called by the JavaScript, as it's already showing before the code executes.

推荐答案

如果您重新组织代码，则可以将JavaScript与HTML完全可以处理那里的事件。这是我的设置方法：

If you reorganize your code, you can separate the JavaScript from the HTML completely and deal with events there. Here's how I'd set it up:

<div id="main_area" class="row-fluid">
    <div class="span10 offset1">
        <div id="formAlert" class="alert hide">  
          <a class="close">×</a>  
          <strong>Warning!</strong> Make sure all fields are filled and try again.
        </div>

        <form name="register" action="" method="post">
            <input type="text" name="username" />
            <br />
            <input type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>
</div>

和JS：

$(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 username = $(this).find('input[name="username"]');
        if ($.trim(username.val()) === "") {
            // If its value is empty
            e.preventDefault();    // Stop the form from submitting
            $("#formAlert").slideDown(400);    // Show the Alert
        } else {
            e.preventDefault();    // Not needed, just for demonstration
            $("#formAlert").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
    });
});

演示： http://jsfiddle.net/VzVy6/8/

数据删除< a class = close>×< / a> 上的code>属性实际上会在单击时删除警报，因此您无法显示稍后再说。因此，除了使用该属性外，您还可以通过手动隐藏/显示与 class = close 元素关联的特定警报来执行所需的操作。

The data-dismiss attribute on the <a class="close">×</a> actually removes the Alert when clicked, so you can't show it again later. So instead of using that attribute, you can do what you want by manually hiding/showing the specific Alert associated with the class="close" elements.

这篇关于在表单错误时调用引导程序警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！