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">
<div class="row">
  <div class="span12">
    <form id="contacto" class="formulario" method="post" action="#">

      <div class="well">
        <div class="row-fluid">
          <div class="span4">

            <div class="control-group">
              <label for="nombre_contacto" class="control-label">Name: <i class="icon-info-sign" data-placement="right" rel="tooltip" title="Info para nombre"></i></label>
              <input id="nombre_contacto" type="text" name="nombre_contacto" placeholder="Su nombre" class="span12" required="true" />
            </div>

            <div class="control-group">
              <label for="apellido_contacto" class="control-label">Lastname: <i class="icon-info-sign" data-placement="right" rel="tooltip" title="Info para apellido"></i></label>
              <input id="apellido_contacto" type="text" name="apellido_contacto" placeholder="Su apellido" class="span12" required="true" />
            </div>



            <div class="row-fluid">
              <div class="control-group span6">
                <label for="calle_contacto" class="control-label">Address:</label>
                <input id="calle_contacto" type="text" name="calle_contacto" placeholder="Calle" class="span12" value="" required="true" />
              </div>

              <div class="control-group span6">
                <label for="numero_contacto" class="control-label">Number:</label>
                <input id="numero_contacto" type="number" name="numero_contacto" placeholder="Número"...

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();
}