JSFiddle - React, Tailwind, and code Playground

by Varun Krishna P

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="main_area" class="row-fluid">
    <div class="span10 offset1">
        <div id="formAlert" class="alert hide">  
          <a class="close" data-dismiss="alert">×</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>

CSS

#main_area {
    margin-top: 50px;
}

JavaScript

$(document).ready(function () {
    $('form[name="register"]').on("submit", function (e) {
        var username = $(this).find('input[name="username"]');
        if (username.val() === "") {
            e.preventDefault();
            $("#formAlert").removeClass("hide");
        } else {
            e.preventDefault();
            alert("Would be submitting form");
        }
    });
});