Question

94

Calling bootstrap alerts on form error

rated 0 times [ 98] [ 4] / answers: 1 / hits: 25726 / 11 Years ago, wed, july 3, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

beatrices

Add To Favorites

Follow

Total Points: 745

Total Questions: 103

Total Answers: 105

Location: Guam

Member since Tue, Nov 29, 2022

1 Year ago

answered 11 Years ago mckenna · Accepted Answer

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.