JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<div class="form">
    <form class="form-horizontal" action="/contact" method="post">
      <div class="control-group">
        <label class="control-label" for="name">Name</label>

        <div class="controls">
          <input name="name" type="text" class="input-medium" id="inputName" />
          <span class="help-inline" style="display: none;">Woops!, your name would be
          helpful here :)</span>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="email">Email</label>

        <div class="controls">
          <input name="email" type="text" class="input-medium" id="inputEmail" />
          <span class="help-inline" style="display: none;">Dont forget your email
          address</span>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="website">Website</label>

        <div class="controls">
          <input name="website" type="text" class="input-medium" />
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="tel">Telephone No</label>

        <div class="controls">
          <input name="tel" type="text" class="input-medium" id="inputTel" />
          <span class="help-inline" style="display: none;">Is this a Valid Number?</span>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="interested">Interested In</label>

        <div class="controls">
          <select name="interested" id="selectInterested">
            <option value="0" selected="selected">
              Please Select....
            </option>

            <option value="Web Design" class="input-medium">
              Web Design
            </option>

            <option value="Branding" class="input-medium">
              Branding
            </option>

            <option value="Apps" class="input-medium">
              Apps
            </option>

            <option...

CSS

.help-inline {
    display: block;
}

JavaScript

// var $ for better adaptation and work with other libraries

$(function(){
  $(document).ready(function(){
     $(".help-inline").each(function() {
      $(this).css('display', 'none');
     });
  });
  $("#inputEmail").bind('blur', is_valid_email);
  $("#inputTel").bind('blur', is_valid_tel);
  $("#inputName").bind('blur', is_valid_name);
  $("#selectInterested").bind('blur', is_valid_subject);
  $("#textarea").bind('blur', is_valid_comment);
  $('#validForm').bind('submit', function() {
    return is_valid_form();
  });
});

//Tel Validate
function is_valid_tel() {
  $this = $("#inputTel");
  var pattern = new RegExp("^\d{11}$");
  if(pattern.test($this.val())){ // valid
    if ($this.closest(".control-group").hasClass("error"))
      $this.closest(".control-group").removeClass("error");
    $this.siblings(".help-inline").css("display", "none");
    return true;
  } else { // error
    if (!$this.closest(".control-group").hasClass("error"))
      $this.closest(".control-group").addClass("error");
    $this.siblings(".help-inline").css("display", "block");
    return false;
  }
}
// Email validate
function is_valid_email() {
  $this = $("#inputEmail");
  var pattern = new...