Validar Caracteres Especiales con jQuery Validate + Bootstrap

REQUISITOS

1.- Framework Jquery (jquery).

2.- Framework Jquery Validate (jQuery Validation Plugin).
3.- Framework CSS Bootstrap (bootstrap).

EMPEZAR

1.- Creamos "Index.html"

<!DOCTYPE html>
<html lang="es-ES">
<head>
 <meta charset="utf8">
 <title>Validar Caracteres Especiales</title>
 <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
 <script src="jquery/jquery-1.10.2.min.js"></script>
 <script src="validate/jquery.validate.js"></script>
 <script src="app.js"></script>
 <script src="formulario.app.js"></script>
</head>
<body>
 <br>
<form class="form-horizontal" role="form" id="formulario">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-4 control-label">
     Validar Caracteres Especiales
    </label>
    <div class="col-sm-3">
      <input type="text" 
        class="form-control" 
        name="txtValidarCaracteres">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-3">
      <button type="submit" class="btn btn-default">
       Validar
      </button>
    </div>
  </div>
</form>
</body>
</html>

2.- Creamos "app.js"

function validateCharacter(value, element) {
  value = value.toLowerCase();
  if(value.indexOf('#') != -1){ return false; }
  else if(value.indexOf('!') != -1){ return false; }
  else if(value.indexOf('$') != -1){ return false; }
  else if(value.indexOf('%') != -1){ return false; }
  else if(value.indexOf('/') != -1){ return false; }
  else if(value.indexOf('(') != -1){ return false; }
  else if(value.indexOf(')') != -1){ return false; }
  else if(value.indexOf('=') != -1){ return false; }
  else if(value.indexOf('?') != -1){ return false; }
  else if(value.indexOf('¡') != -1){ return false; }
  else if(value.indexOf('¿') != -1){ return false; }
  else if(value.indexOf("'") != -1){ return false; }
  else if(value.indexOf('´') != -1){ return false; }
  else if(value.indexOf('*') != -1){ return false; }
  else if(value.indexOf('[') != -1){ return false; }
  else if(value.indexOf(']') != -1){ return false; }
  else if(value.indexOf('{') != -1){ return false; }
  else if(value.indexOf('}') != -1){ return false; }
  else if(value.indexOf('+') != -1){ return false; }
  else if(value.indexOf('"') != -1){ return false; }
  else if(value.indexOf('_') != -1){ return false; }
  else if(value.indexOf('|') != -1){ return false; }
  else if(value.indexOf('°') != -1){ return false; }
  else if(value.indexOf('&') != -1){ return false; }
  else{ return true; }
}

$.validator.addMethod("character", validateCharacter);

3.- Crear archivo "formulario.app.js"

$(document).ready(function(){
$('#formulario').validate({
    rules: {
        txtValidarCaracteres: { 
            required: true,
            character:true
        }
    },
    messages: {
        txtValidarCaracteres: {
            required: 'Se requiere este campo.',
            character: 'No se aceptan caracteres especiales.'
        }
    },
    onfocusout: false,
    errorElement: 'div',
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {                    
            validator.errorList[0].element.focus();
        }
    },
    highlight: function (element) { 
        $(element)
        .closest('.form-group')
        .addClass('has-error'); 
    },
    errorPlacement: function(error, element){
        error.appendTo(element.parent());
    },
    success: function (element) {
        element
        .closest('.form-group')
        .removeClass('has-error');
        element.remove();
    },
    submitHandler: function(form){
        form.submit();
    }
});
});

4.- Abrir el archivo "index.html" en un navegador.
5.- Debería quedar así