JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<body>
    <div id="formContainer">
        <div class="formHeader">
             <h2>Get in touch</h2>

        </div>
        <form id="contactForm" action="" method="post">
            <p class="formLabel">First Name</p>
            <input type="text" name="Given Name" value="First Name" />
            <p class="formLabel">Surname Name</p>
            <input type="text" name="surname" value="Second Name" />
            <p>Reason for Message</p>
            <select name="contactReason" value="Msg Type" size="1">
                <option value="Msg Type">Please Select</option>
                <option value="Work">Work Opportunity</option>
                <option value="Question">Question</option>
                <option value="Advice">Advice</option>
                <option value="Other">Other</option>
            </select>
            <p class="formLabel">Contact Email</p>
            <input type="email" name="email" value="Contact email" />
            <p class="formLabel">Message</p>
            <textarea name="msg" maxlength="1000">Please enter your Message here - Maxlength 1000</textarea>
            <div class="formFooter">
                <div class="formFoot2Col">
                    <input id="submitForm" type="submit" value="submit" />
                </div>
                <div class="formFoot2Col">
                    <input id="resetForm" type="reset" value="Clear" />
                </div>
            </div>
        </form>
    </div>
</body>

CSS

/* Contact Form */
 #formContainer {
    height:700px;
    width:480px;
    margin:0 auto;
    background-color:white;
}
.formHeader {
    height:100%;
    max-height:47px;
    width:100%;
    max-width:480px;
    background-color: #d5d5d5;
    padding:10px;
    margin:0;
}
#formContainer h2 {
    padding:0;
    margin:0;
}
form.formContact {
    width:100%;
    max-width:400px;
    height:auto;
    padding:10px;
    margin:0 auto;
    background-color: #efefef;
}
form p {
    text-align:left;
    margin:10px;
    padding-left:30px;
}
.error {
    color: #FF0000;
}
/*span {
    opacity : 0;
    filter : alpha(opacity=0);
}
span.formHelp, span.formError, span.formComp {
    font-size:0.75em;
    font-style:italic;
    padding-left:10px;
}
span.formHelp {
    color:blue;
}
span.formError {
    color:red;
}
span.formComp {
    color:green;
}*/
 label.formLabel {
    display:block;
    height:25px;
    width:100%;
    max-width:400px;
    padding-top:10px;
    font-size:1em;
    margin:0 auto;
}
label.formLabel, input, textarea, select {
    letter-spacing:2px;
}
select {
}
input, textarea {
    width:100%;
    max-width:398px;
    padding:0;
    margin:0 auto;
    text-indent:5px;
    border:1px solid #d5d5d5;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
textarea {
    resize:none;
    height:324px;
}
input {
    height:27px;
}
.required {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.3);
    /* background-color:#FCC0B8; 
       opacity : 0.2;
       filter : alpha(opacity=20); */
}
.voluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.3);
}
.complete {
    background:rgb(0, 140, 0);
    background:rgba(0, 140, 0, 0.3);
    /* background-color:#008c00; */
}
.cursorFocusRequired {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.1);
}
.cursorFocusVoluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.1);
}
.formFooter {
    position:absolute;
   ...

JavaScript

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(document).ready(function () {
    var formArray = $("form#contactForm").serializeObject();
    console.log(formArray);
    var formArrayJSON = JSON.stringify(formArray);
    console.log(formArrayJSON);
});

var finalArray = [];
//console.log(finalArray);

$('input, textarea, select').on('focus', function () {
    var $this = $(this);

    focusedName = $this.attr('name');
    console.log(focusedName + ' focusedName');

    focusedValue = $this.attr('value');
    console.log(focusedValue + ' focusedValue');
});
$('input, textarea, select').on('blur', function () {
    var $this = $(this);

    var blurName = $this.attr('name');
    console.log(blurName + ' blurName');

    var blurValue = $this.val();
    console.log(blurValue + ' blurValue');

    if (blurValue === "") {
        console.log('no val = focusedValue: ' + focusedValue);
        $this.val(focusedValue);
    }

for $('input[name=Given Name]') && (blurValue !=== focusedValue) {
    //Only letters a-z, between 3-16 chars
    // /^ match any string from begining of brackets
    // $/ match chars from end of pattern
    // ^[]$ pattern goes inside []
    var regExName = '/^[a-z]{3,16}$/';
    var inputName = $(this);
    var userName = inputName.val();
    if regExName.test(userName) {
        console.log(regExName.test(userName));
    } else {
        console.log(regExName.test(userName));
    }
}
    
        console.log(finalArray);
});