JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="cform" id="contact-form">
            <form id="form13" name="form13" role="form" class="contactForm" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://Some3rdPartyPOSTService">
                <div class="form-group">
                    <label for="name">Your Name</label>
                    <input type="text" name="Field1" class="form-control" id="name" placeholder="Tony Stark" /> <span id="errorName" style="margin-left:10px;"></span> 
                </div>
                <div class="form-group">
                    <label for="email">Your Email</label>
                    <input type="email" class="form-control" name="Field4" id="email" placeholder="" data-rule="email" data-msg="Please enter a valid email" /> <span id="errorEmail" style="margin-left:10px;"></span> 
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea class="form-control" name="Field3" id="message" rows="5" data-rule="required" data-msg="Please write something here"></textarea> <span id="errorMessage" style="margin-left:10px;"></span> 
                </div> <span id="errorSubmit" style="margin-left:10px;"></span>

                <button type="submit" class="btn btn-theme pull-left">SEND MESSAGE</button>
            </form>
        </div>
    </div>
    <!-- ./span12 -->
</div>
</div>
</section>

JavaScript

var valid = 0;

   function checkName(elem) {

       //gather the calling elements value
       var val = document.getElementById(elem.id).value;
       //Check length
       if (val.length < 1) {
           document.getElementById("errorName").innerHTML = "<span>Don't forget your name.</span>";

       } else if (val.length > 40) {
           document.getElementById("errorName").innerHTML = "<span>This doesn't look like a name.</span>";
           //If valid input increment var valid.
       } else {
           document.getElementById("errorName").innerHTML = "";
           valid++;

       }
   }

   function checkEmail(elem) {

       var val = document.getElementById(elem.id).value;
       //Check email format validity
       var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       if (!re.test(val)) {
           document.getElementById("errorEmail").innerHTML = "<span>Please enter a valid email.</span>";
       } else {
           document.getElementById("errorEmail").innerHTML = "";
           valid++;
       }
   }

   function checkMessage(elem) {

       var val = document.getElementById(elem.id).value;

       if (val.length < 1) {
           document.getElementById("errorMessage").innerHTML = "<span>It looks like you forgot the message.</span>";

       } else if (val.length > 2000) {
           document.getElementById("errorMessage").innerHTML = "<span>It looks like your message is too long.</span>";

       } else {
           document.getElementById("errorMessage").innerHTML = "";
           valid++;
       }

   }


   //Contact: jQuery check for null/empty/errors
   $(document).ready(function () {

       function checkSubmit() {
           if (valid == 3) {
               document.getElementById("errorSubmit").innerHTML = "";
           }
       }

       //If errors when submitting display message

      ...