3

我有警报 div 的以下 HTML 代码：

<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：

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()提交表单时调用。

编辑：根据要求，这里是触发 validateForm() 的代码：

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

现在我已经解决了调用它的问题，如何隐藏 div 直到它被 JavaScript 调用，因为它在代码执行之前已经显示出来了。

4

1 回答 1

9

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>

And the 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
    });
});

DEMO: http://jsfiddle.net/VzVy6/8/

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.

于 2013-07-04T03:05:25.320 回答