Calling bootstrap alerts on form error

Question

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>

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

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.

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

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

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.

Answer 1

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.