JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<form id="contacto" class="formulario" method="post" action="#">


  <div class="well">

    <div class="row-fluid">


      <div class="span4">

        <div class="control-group">
          <label for="street_text" class="control-label">Street: <i class="icon-info-sign" data-placement="right" rel="tooltip" title="street name"></i></label>
          <input id="street_text" type="text" name="street_text" placeholder="street name" class="span12" required/>
        </div>

        <div class="control-group">
          <label for="telephone_number" class="control-label">Telephone: <i class="icon-info-sign" data-placement="right" rel="tooltip" title="tel number"></i></label>
          <input id="telephone_number" type="number" name="telephone_number" placeholder="tel number" class="span12" required />
        </div>

        <div class="control-group">
          <label for="id_number" class="control-label">ID: <i class="icon-info-sign" data-placement="right" rel="tooltip" title="Your ID number"></i></label>
          <input id="id_number" type="number" name="id_number" placeholder="Your ID number" class="span12"  required/>
        </div>



        <div class="contacto-controls text-right">
          <button class="btn btn-csm-azul" type="submit">Send</button>
        </div>
      </div>


    </div>


  </div>
</form>

JavaScript

$(document).ready(init);

function init() {

  validarcontacto();
  activarTooltips();
}

function validarcontacto() {
  $("#contacto").validate({
    
    highlight: function (element) {
      $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
      element.addClass('valid')
        .closest('.control-group').removeClass('error').addClass('success');
    }

  });
}


function activarTooltips() {
  $("[rel=tooltip]").tooltip();
}