A CodePen by David Chase. Ajax Form - Ajax form with form and email validation

readme.md

Coffeescript based Form

This form has validation and all that jazz written in coffeescript.

Current Version 1.0

New version is begining debugged and will be posted soon

index.html

<div class="contactHolder">
    <h3>The Commnunity</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>            
    <button class="contactUs">Contact Community</button>
    <div class="formHolder">
        <h4>Sign Up</h4>
        <div class="loading"></div>
        <form class="theForm" action="">
            <input type="text" title="Enter your First Name (required)" placeholder="First Name (required)" name="firstname" class="layoutForm required"/>
            <input type="text" title="Enter your Last Name (required)" placeholder="Last Name (required)" name="lastname" class="layoutForm required"/>
            <input type="text" title="Enter your E-mail (required)"  placeholder="Email (required)" name="email" class="layoutForm required email"/>
            <input type="text" title="Enter your Phone Number (optional)"  placeholder="Phone" name="phone" class="layoutForm" />
<p class="formError">Sorry, could not the submit form, please try again.</p>
<p class="eMessage">Please fill in required fields</p>
<p class="emailError">Please enter valid email address</p>            
            <input type="submit" value="Get Info" class="layoutForm sendForm"/>
            <input type="button" value="No Thanks" class="layoutForm closeForm" />
        </form>
    </div>
</div>

script.coffee

jQuery ($) ->

    # Cache variables
    theForm = $('.theForm')
    formHolder = $('div.formHolder')
    h4 = $('h4')
    thanks = $('p.thanks')
    emailError = $('.emailError')
    loadingIcon = $('.loading')
 


    domInit = () ->
        ieTest()
        $('.contactUs').on 'click', (e) ->
            openForm(e)
            resetForm()
       formHolder.on 'click','.closeForm', (e) ->
            closeForm(e)
       theForm.on 'click','.sendForm', (e) ->
            e.preventDefault()
            url = theForm.attr('action')
            query = theForm.serialize()
            pageRefresh = false
            submitForm(url,query,pageRefresh)
        
    openForm =  (e) ->
        e.preventDefault()
        formHolder.show 'clip', 'vertically', 500
    submitForm = (url, query, pageRefresh) ->
        $.ajax
            url:url
            data:query
            type:'POST'
            beforeSend: ->
                validateForm()
            complete: (data) ->
                if data.status == 400 or data.status == 402 or data.status == 404 or data.status == 500
                    formError()
                else
                    loadingIcon.hide()
                    formSuccess(data)
        return false
    closeForm = (e) ->
        e.preventDefault()
        formHolder.hide 'clip', 'vertically', 500
    resetForm = () ->
        h4.show();
        thanks.hide() 
        theForm.show()
        $('.theForm input[type="text"]').val('')
    formError = (e) ->
        $('.formError').show()
        loadingIcon.hide()
    formSuccess = (data) ->
        h4.hide()
        theForm.fadeOut 'fast', ->
            formHolder.append('<p class="thanks">Thank You For Your Interest!</p><p> You can expect a personal response shortly to discuss your new home search.</p>')
            button = $('.closeForm').val('Close').addClass('closeButton')
            thanks.append(button)
    validateEmail = () ->
        theEmail = $('.email').val()
        filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
        if filter.test(theEmail)
            $('.email').removeClass('error')
            emailError.hide()
            return true
        else
            $('.email').addClass('error')
            emailError.show()
            return false
    ieTest = () ->
        if !Modernizr.input.placeholder
            $('input[type="text"]').each ->
              pl = $(@).attr('placeholder')
              updated = $(@).val(pl)
              $(@).focus ->
                if pl is $(@).val()
                  $(@).val('')
              $(@).blur ->
                if $(@).val() is ''
                  $(@).val(pl)
            count = 0
            $(@).on 'change', ->
              ++count
              if count >= 3
                return
              else 
                return false
         else
           return true
    validateForm = (e) ->
        isValid = true
        $('.required').each ->
            if $(@).val().length is 0 or $(@).attr('placeholder') is $(@).val()
                $(@).addClass('error')
                $('.eMessage').show()
                isValid = false
                return
            else
                $(@).removeClass('error')
                return

        if isValid and validateEmail() and ieTest()
            emailError.hide()
            loadingIcon.show()
            return true
        else 
            return false


    domInit()
    

style.css

.contactHolder{
    font-family: 'Ubuntu', 'Lato', sans-serif;
    font-weight: 400;
    /* Size and position */
    width: 20em;
    height:25em;
    position: relative;
    margin: 60px auto 30px;
    padding: 10px;
    overflow: hidden;

    /* Styles */
    background: #111; 
    color:#fff;
    line-height:1.333;
    border-radius: 0.4em;
    border: 1px solid #191919;
    box-shadow: 
        inset 0 0 2px 1px rgba(255,255,255,0.08), 
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}



h3 {
    padding: 0 1.25em;
    margin: .5em 0;
    font-size:1.3em;
}

h4 {
    margin: 0px 3.5em;
    font-size:1em;
}
p {
    padding: 0 1.6em;
    text-align:left;
    line-height:1.333;
}

.contactUs{
     /* Width and position */
    width: 80%;
    padding: 8px 5px;
    margin: 2em 2em;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #38a6f0;
    cursor:pointer;
  
    /* Font styles */

    color: #fff;

    font-size: 15px;

}

div.formHolder {
    position:absolute;
    z-index:999;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#444;
    color:#fff;
    width:20em;
    height:25em;
    padding:20px;
    display:none;
}

.formHolder:before {
    /* Size and position */
    content: "";
    width: 8px;
    height: 5px;
    position: absolute;
    left: 32%;
    top: -7px;
    
    /* Styles */
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

.formHolder:after {
    /* Size and position */
    content: "";
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;

    /* Styles */
    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}


.formHolder h4:after, .formHolder p:after{
    /* Size and position */
    content:"";
    width:35em;
    height:20em;
    position:absolute;
    top:0;
    left:45px;
    z-index:99999;

    /* Styles */
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
    background: -o-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
    background: -webkit-linear-gradient(50deg, rgba(255,255,255,.10), rgba(0,0,0,0));
    background: linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
    pointer-events:none;
}

.no-pointerevents .contactHolder p:before {
    display: none;
}


.loading {
    position:absolute;
    margin:100px 0 0 130px;
    height:50px;
    width:50px;
    z-index: 9999;
    display:none;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius:5px;
    border-radius: 5px;
    -webkit-box-shadow:0 1px 3px #000;
    -moz-box-shadow:0 1px 3px #000;
    -o-box-shadow:0 1px 3px #000;
    -khtml-box-shadow:0 1px 3px #000;
    box-shadow:0 1px 3px #000;
    background:rgba(0,0,0,0.80) url(http://www.tollbrothers.com/tb/images/colorbox/loading.gif) center center no-repeat;
}

.theForm {
    margin:1.5em auto 3em;
    width:14em;
}

input[type="text"]{
    /* Size and position */
    width: 93%;
 
    padding: 8px 5px;
    margin-bottom: 6px;
    font-size: 12px;

    /* Styles */
    background: #1f2124; /* Fallback */
    background: -moz-linear-gradient(#1f2124, #27292c);
    background: -ms-linear-gradient(#1f2124, #27292c);
    background: -o-linear-gradient(#1f2124, #27292c);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
    background: -webkit-linear-gradient(#1f2124, #27292c);
    background: linear-gradient(#1f2124, #27292c);    
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;

    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: #fff;
}

.layoutForm {
    background:#fff;
    border:1px solid #fff;
    border-radius:4px;
    padding:.75em .75em;
    display:block;
    margin:.5em 0;
    width: 17em;
    position:relative;
}

.ui-tooltip {
    z-index:99999;
    font-size:.1em;
    background:#f6f6f6;
    border-radius:6px;
    box-shadow:none;
    color:#6fa4c8 !important;
    border:1px solid #dcdcdc !important;
}



.sendForm {
    /* Width and position */
    width: 100%;
    padding: 8px 5px;
    margin: .5em 0em;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #659AE0;
    cursor:pointer;
  
    /* Font styles */

    color: #fff;
    font-size: 15px;
 
}

.closeForm {
       /* Width and position */
    width: 100%;
    padding: 8px 5px;
    margin: .5em 0em;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #ccc;
    cursor:pointer;
  
    /* Font styles */
 
    color: #999;
    font-size: 15px;

}


.error {
    background:#F5494C !important;
    color:#bf0000 !important;
    border:1px solid #bf0000 !important;
    position:relative;
}

.eMessage,.emailError,.formError {
    color:#fff;
    font-size: .78em;
    font-weight:normal;
    display:none;
}

.thanks {
    margin: 38px 22px;
    text-align: left;
    line-height: 1.333;
    
}

.closeButton {
    margin: 15px 0px;
}