3.7 Validación de datos del lado cliente.

El concepto de validación de formularios del lado del cliente, es un problema de siempre se ha solucionado con Javascript. La solución con html puro sigue en proceso de desarrollo apesar de las bondades de HTML 5, debido a la falta de estandarización de los navegadores.

Describiremos aquí en uso de FormValidation un plugin de jQuery para Bootstrap. La plantilla base de un formulario validado con esta librería es:

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bootstrap Validator</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css' rel='stylesheet'>
</head>
<body>

 <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
 <script src='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/language/es_ES.min.js'></script>
 <script src='index.js'></script>      
</body>
</html>

Observe que es necesario usar versiones recientes de jQuery en este caso usamos la versión 1.11, la mínima actualización que usted puede usar es 1.9 o FormValidation no funcionara.

Adicionalmente soporta los siguientes frameworks: Foundation, Pure, Semantic, UIKit

Incluye soporte para multuples lenguajes entre ellos el español

Ejemplos

<div class='loginbtn' align='center' style='margin:100px;'>
    <button type='button' class='btn btn-default' data-toggle='modal' data-target='#loginModal'>
            <span class='glyphicon glyphicon-log-in'></span> Formulario de Login</button>
  </div>
 
  <div class='modal fade' id='loginModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
   <div class='modal-dialog'>
	 <div class='modal-content'>
	   <div class='modal-header'>
         <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
         <h4 class='modal-title text-center'>Inicio de Sesión</h4>
	   </div>
   	   <div class='modal-body'>
          <form id='loginForm' method='post' class='form-horizontal' action='none'>
            <div class='form-group'>
			  <label class='col-md-3 control-label'>Nombre de Usuario</label>
			  <div class='col-md-7'>
			    <input type='text' class='form-control' name='usuario' />
			  </div>
		    </div>
			<div class='form-group'>
		 	  <label class='col-md-3 control-label'>Password</label>
			  <div class='col-md-7'>
			    <input type='password' class='form-control' name='password' />
			  </div>
			</div>
			<div class='form-group'>
		      <div class='col-md-5 col-md-offset-3'>
				<button type='submit' class='btn btn-default'>Login</button>
			  </div>
			</div>
	      </form>
	    </div>
	  </div>
   </div>
 </div>

Formulario de contacto

  <form id='contactForm' method='post' class='form-horizontal'>
    <div class='form-group'>
      <label class='col-md-3 control-label'>Nombre completo</label>
      <div class='col-md-6'>
        <input type='text' class='form-control' name='fullName' />
      </div>
    </div>
    <div class='form-group'>
      <label class='col-md-3 control-label'>Email</label>
      <div class='col-md-6'>
        <input type='text' class='form-control' name='email' />
      </div>
    </div>
    <div class='form-group'>
      <label class='col-md-3 control-label'>Título</label>
      <div class='col-md-6'>
        <input type='text' class='form-control' name='title' />
      </div>
    </div>
    <div class='form-group'>
      <label class='col-md-3 control-label'>Contenido</label>
      <div class='col-md-6'>
        <textarea class='form-control' name='content' rows='5'></textarea>
      </div>
    </div>
    <!-- #messages is where the messages are placed inside -->
    <div class='form-group'>
      <div class='col-md-9 col-md-offset-3'>
      <div id='messages'></div>
    </div>
</div>
<div class='form-group'>
<div class='col-md-9 col-md-offset-3'>
<button type='submit' class='btn btn-primary'>Validar</button>
</div>
</div>
</form>
$(document).ready(function() {
  $('#contactForm').bootstrapValidator({
    container: '#messages',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      fullName: {
        validators: {
          notEmpty: { message: 'El nombre completo es necesario y no puede estar vacío'}
        }
      },
      email: {
        validators: {
          notEmpty: { message: 'La dirección de correo electrónico que se requiere y no puede estar vacío'},
          emailAddress: { message: 'la dirección electrónica es no valida'}
        }
      },
      title: {
        validators: {
          notEmpty: { message: 'El título es obligatorio y no puede estar vacío'},
          stringLength: {
            max: 100,
            message: 'El título debe ser inferior a 100 caracteres'
          }
        }
      },
      content: {
        validators: { 
          notEmpty: { message: 'El contenido es necesario y no puede estar vacío'},
          stringLength: {
            max: 500,
            message: 'El contenido debe ser inferior a 500 caracteres de longitud'
          }
        }
      }
    }
  });
});