JSFiddle - React, Tailwind, and code Playground

by DonamiteIsTNT

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Colorbox Login Dialog</title>
<link rel="stylesheet" type="text/css" href="http://jacklmoore.com/colorbox/example3/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery.malsup.com/form/jquery.form.js"></script>
<script type="text/javascript" src="http://jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
function onSubmitForm(formData, jQueryForm) {
    var errorFound = false,
        //both formData and jQueryForm contain the form data, but for basic stuff its
        //easier to work with standard form object directly.
        form = jQueryForm[0],
        errorMsg = $("#errorMessage").html("");
        
    if(form.username.value=="") {
        errorFound = true;
        errorMsg.html("&bull; Enter username<br>");
    }
    if(form.password.value=="") {
        errorFound = true;
        errorMsg.html(errorMsg.html() + "&bull; Enter password<br>");
    }
    
    if(errorFound) {
        $.colorbox({
            open:true,
            inline:true,
            href: "#error"
        });
        //do not send this form
        return false;
    } else {
        //send form
        $('#cboxLoadingGraphic').show();
        return true;
    }
}

function onServerResponse(response) {
    $('#cboxLoadingGraphic').hide();
    if(response===1) {
        //put your success code here
    } else {
        $("#errorMessage").html("Username and password invalid");
        $.colorbox({
            open:true,
            inline:true,
            href: "#error"
        });
    }
}

$(document).ready(function() {
    $('#login').ajaxForm({
        beforeSubmit: onSubmitForm,
        error: onServerResponse,
        success: onServerResponse
    });
    
    $(".colorboxDialog").colorbox({
        inline:true
    });
    
   ...