JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<script src="http://www.bcheroes.com/CatalystScripts/ValidationFunctions.js"></script>
<form id="bcForm">
    <h2>Typical BC Form</h2>
    <table>
        <tr>
            <td>
                <label>First Name</label><br/>
                <input name="FirstName" type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Last Name</label><br/>
                <input name="LastName" type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Email</label><br/>
                <input name="EmailAddress" type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Captcha Field</label><br/>
                <input name="captcha" type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                <input name="submit" value="Submit" type="button"/>
            </td>
        </tr>
    </table>
</form>


<form id="customForm">
    <h2>Captcha Lightbox Form</h2>
    <table>
        <tr>
            <td>
                <label>First Name</label><br/>
                <input name="FirstName" type="text" id="firstName"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Last Name</label><br/>
                <input name="LastName" type="text" id="lastName"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Email</label><br/>
                <input name="Email" type="text" id="email"/>
            </td>
        </tr>
        <tr style="display:none;">
            <td>
                <div id="captchaDiv">
                    <label>Captcha Field</label><br/>
                    <input name="captcha" type="text" id="captcha"/>
                    <div>
                        <input type="button" value="Cancel" id="cancel"/>
                        <input type="button" value="Submit" id="submit"/>
                    </div>
                </div>
            </td>
     ...

CSS

form{
    float:left;
    width:50%;
}

#screenBg{
    display:none;
    width:100%;
    height:100%;
    z-index:100;
    position:absolute;
    left:0px;
    top:0px;
    background:rgba(0,0,0,0.75);
}

#captchaDiv{
    display: none;
    position: absolute;
    z-index: 110;
    top: 20%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0 auto;
    width: 300px;
    height: 60px;
    background: #fafafa;
    text-align: center;
    padding: 40px 0px;
}

JavaScript

$(function(){
    $('#submitBtn').click(function(){
        var valid = false;
        //make sure user inputted all needed info here with a validation check...here is a quick non-validated example...
        $('#customForm input:not([id="captcha"]').each(function(){
            //if the field is empty...
            if($(this).val()==""){
                valid = false;
                alert('Please fill in all fields');
                return false;
            }
            //passed check..set to true
            valid = true;
        });
        
        //form is not valid...don't continue
        if(!valid){return false;}
        
       //show the overlay
        $('#screenBg').show();
        //remove captcha from form so it can be positioned correctly and show it
        $('#captchaDiv').appendTo('body').show();
    });
    
    //they clicked cancel inside captcha popup
    $('#cancel').click(function(){
        $('#screenBg').hide();
        $('#captchaDiv').hide();
    });
    
    //they click submit inside captcha popup
    $('#submit').click(function(){
        //captcha validation code would go here...
        
        //once validated...
        //$('#customForm').submit();
    });
});