JSFiddle - React, Tailwind, and code Playground

by Jiff Pom

HTML

<div id="cv" class="instaFade">




        <div class="form-style" id="contact_form">
            <div class="form-style-heading">test</div>
            <div id="contact_results"></div>
            <div id="contact_body">
                <label>
                    <span>Name <span class="required">*</span></span>
                    <input type="text" name="name" id="name" required="true" class="input-field"/>
                </label>
                <label>
                    <span>Email <span class="required">*</span></span>
                    <input type="email" name="email" required="true" class="input-field"/>
                </label>
                <label>
                    <span>Phone <span class="required">*</span></span>
                    <input type="text" name="phone1" maxlength="4" placeholder="+91"  required="true" class="tel-number-field"/>&mdash;
                    <input type="text" name="phone2" maxlength="15"  required="true" class="tel-number-field long" />
                </label>
                <label><span>Attachment</span>
                    <input type="file" name="file_attach" class="input-field" />
                </label>

                <label for="subject"><span>Regarding</span>
                    <select name="subject" class="select-field">
                        <option value="General Question">General Question</option>
                        <option value="Advertise">Advertisement</option>
                        <option value="Partnership">Partnership Oppertunity</option>
                    </select>
                </label>
                <label for="field5"><span>Message <span class="required">*</span></span>
                    <textarea name="message" id="message" class="textarea-field" required="true"></textarea>
                </label>
                <label>
                    <span>&nbsp;</span><input type="submit" id="submit_btn" value="Submit" />
                </label>
            </div>
        </div>

CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    border:0;
    font:inherit;
    font-size:100%;
    margin:0;
    padding:0;
    vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}

.form-style label {
    clear: both;
}

html, body {background: #181818; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222;}

.clear {clear: both;}

p {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 20px;
    color: #444;
}

#cv {
    width: 90%;
    max-width: 800px;
    background: #f3f3f3;
    margin: 30px auto;
}

.mainDetails {
    padding: 25px 35px;
    border-bottom: 2px solid #cf8a05;
    background: #ededed;
}

#name h1 {
    font-size: 2.5em;
    font-weight: 700;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
    margin-bottom: -6px;
}

#name h2 {
    font-size: 2em;
    margin-left: 2px;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
    padding: 0 40px;
}

#headshot {
    width: 12.5%;
    float: left;
    margin-right: 30px;
}

#headshot img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

#name {
    float: left;
}

#contactDetails {
    float: right;
}

#contactDetails ul {
    list-style-type: none;
    font-size: 0.9em;
    margin-top: 2px;
}

#contactDetails ul li {
    margin-bottom: 3px;
    color: #444;
}

#contactDetails ul li a, a[href^=tel] {
    color: #444; 
    text-decoration: none;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
   ...

JavaScript

$(document).ready(function() {
            $("#submit_btn").click(function() { 

                var proceed = true;
                //simple validation at client's end
                //loop through each field and we simply change border color to red for invalid fields       
                $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
                    $(this).css('border-color',''); 
                    if(!$.trim($(this).val())){ //if this field is empty 
                        $(this).css('border-color','red'); //change border color to red   
                        proceed = false; //set do not proceed flag
                    }
                    //check invalid email
                    var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
                    if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                        $(this).css('border-color','red'); //change border color to red   
                        proceed = false; //set do not proceed flag              
                    }   
                });

                if(proceed) //everything looks good! proceed...
                {
                   //data to be sent to server         
                    var m_data = new FormData();    
                    m_data.append( 'user_name', $('input[name=name]').val());
                    m_data.append( 'user_email', $('input[name=email]').val());

                    //instead of $.post() we are using $.ajax()
                    //that's because $.ajax() has more options and flexibly.
                    $.ajax({
                      url: 'x',
                      data: m_data,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      dataType:'json',
                      success: function(response){
                         //load json data from server and output...