JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<form class="span6 widget form-horizontal" id="add-form">
    <header>
        <h4 class="title">Add</h4>
    </header>
    <section class="body">
        <div class="body-inner">
            <!-- First Name -->
            <div class="control-group">
                <label class="control-label">Add</label>
                <div class="controls">
                    <input type="text" name="keyword_add" class="required">
                    <input type="hidden" value="<?php echo $pageID; ?>">
                </div>
            </div>	<span id="add--response"></span>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Add</button>
                <button type="button" class="btn" data-toggle="collapse" data-target="#add-keyword-box">Cancel</button>
            </div>
            <!--/ Form Action -->
        </div>
    </section>
</form>

JavaScript

$("#add-form").validate({
    submitHandler: function (form) {
        var request;
        // bind to the submit event of our form
        $("#add-form").submit(function (event) {
            // abort any pending request
            if (request) {
                request.abort();
            }
            // setup some local variables
            var $form = $(this);
            // let's select and cache all the fields
            var $inputs = $form.find("input, select, button, textarea");
            // serialize the data in the form
            var serializedData = $form.serialize();

            // let's disable the inputs for the duration of the ajax request
            $inputs.prop("disabled", true);

            // fire off the request to /form.php

            request = $.ajax({
                url: "forms.php",
                type: "post",
                data: serializedData
            });

            // callback handler that will be called on success
            request.done(function (response, textStatus, jqXHR) {
                // log a message to the console
                console.log("Hooray, it worked!");
                alert("success awesome");
                $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>');
            });

            // callback handler that will be called on failure
            request.fail(function (jqXHR, textStatus, errorThrown) {
                // log the error to the console
                console.error(
                    "The following error occured: " + textStatus, errorThrown);
            });

            // callback handler that will be called regardless
            // if the request failed or succeeded
            request.always(function () {
                // reenable the inputs
                $inputs.prop("disabled", false);
           ...