Reigel Gallarde

Reigel - A web developer from Philippines. I love Wordpress, PHP, jQuery, javascript, css. and html. A web developer that will bring your web designs into reality.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="alert hide" id="errorAlert">
<a class="close">×</a>
Oops!!. You may have left some fields empty. Please fill them out.</div>
<form name="register" action="" method="post">
    <input type="text" name="email" />
    <input type="submit" class="btn" value="Submit" />
</form>

JavaScript

$('form[name="register"]').on("submit", function (e) {
    var email = $(this).find('input[name="email"]');
    if ($.trim(email.val()) === "") {
        e.preventDefault();
       $("#errorAlert").hide().slideDown(400).removeClass('hide')
    } else {

        $("#errorAlert").slideUp(400, function () {
            email.val("");
        });
    }
});

$(".alert").find(".close").on("click", function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).closest(".alert").slideUp(400);
});