Question

我有以下警告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>

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

Answer 1

如果您重新组织代码，则可以将JavaScript与HTML完全分开，并在那里处理事件。以下是我如何设置它：

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

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

data-dismiss上的<a class="close">×</a>属性实际上会在点击时删除警报，因此您以后无法再显示该警报。因此，您可以通过手动隐藏/显示与class="close"元素关联的特定警报来执行您想要的操作，而不是使用该属性。

在表单错误上调用引导程序警报

1 个答案: