Validar campo de texto sólo números, letras etc... con JQUERY

A veces he tenido la necesidad de validar un campo de texto que sólo permita cierto tipo de caracteres como es el caso de documentos(sólo números) o nombres(letras y no números) y tantas combinaciones que requiera un campo de texto para una determinada página web.
Y ya que vamos a utilizar JQUERY hagamos uso de este plugin de jquery muy fácil de utilizar.

$('selector').validCampoFranz('mis-caracteres');


Demostraciones

Campo que acepta sólo números
Campo de acepta sólo letras y espacios

Quieres usarlo en tu proyecto?
Primero descargar el Jquery :
 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
Segundo descargar el Plugin :
 https://raw.github.com/franz1628/validacionKeyCampo/383dab045bbc992120c4276e9d6f2c3a852f60b9/validCampoFranz.js
<!doctype html>
<html>
   <head>
     <script src="jquery.min.js"></script>     
     <script src="validCampoFranz.js"></script>
       <script type="text/javascript">
            $(function(){
                //Para escribir solo letras
                $('#miCampo1').validCampoFranz(' abcdefghijklmnñopqrstuvwxyzáéiou');

                //Para escribir solo numeros    
                $('#miCampo2').validCampoFranz('0123456789');    
            });
        </script>        
   </head>
   <body>
        <h2>Escribe sólo teclas permitidas</h2>  
        
        Mi Campo 1 <input type="text" id="miCampo1">      
        Mi Campo 2 <input type="text" id="miCampo2">      
   </body>
</html>

Podemos ver acá un tutorial de como utilizarlo.


Obtener nombre y formato de archivo con PHP

Con dos lineas de código podemos sacar el nombre y formato de un archivo. ¡A copiar y a pegar se ha dicho!.

   $archivo = "Franz.jpge";

  $formato = substr( $archivo , strripos( $archivo , "." ) + 1);
  $nombre  = substr( $archivo , 0 , strripos( $archivo , "." ));

  echo $formato;    // "jpge"
  echo $nombre;    // "Franz"

¿Que hace el código?

Utiliza dos funciones, substr y strripos.
Lo que hacemos primero es obtener la ubicación del ultimo punto del nombre total del archivo (puede darse el caso que el nombre total del archivo tenga varios puntos) con la función (strripos) , para después utilizar la funcion de PHP (substr) parar cortar el nombre total del archivo desde la ubicación del punto hasta el final, y así obtenemos el formato!.
Para el nombre del archivo sin el formato, simplemente cortamos el nombre del archivo total desde el inicio hasta la ubicación del punto.

¿ Como usar Jquery Validate ?

Vamos de una vez al grano.
Tenemos un formulario con un campo de texto y un combo.
Descargar Jquery : http://code.jquery.com/jquery-1.10.2.min.js
Descargar Jquery Validate : http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
    $(function(){
        $('#miForm1').validate();
    }
</script>

<form action="post" id="miForm1">
    <input type="text" class="required" name="mi_nombre">
    <select class="required" name="mi_pais">
        <option value="">Elegir</option>
        <option value="1">Peru</option>
    </select>
    <input type="submit" value="Enviar">
</form>

Demostración:






Importante :

  1.  No olvidar agregar el atributo name a todos campos y combos del formulario.
  2. Los combos deben tener una opción con el atributo value = ""

Reglas para validar email, url, maximo, minimo etc

Jquery Validate por defecto valida que los campos no estén vacíos (required), ¿pero si queremos validar un email o un máximo número de caracteres para un nombre?, pues para eso podemos usar el método rules  de Jquery Validate, ¿y como? bueno simplemente agregando los métodos necesarios para ese campo o campos (que pueden ser required, email, max, min, range , etc...). Veamos un ejemplo.

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>

<script type="text/javascript">
    $(function(){
        $('#miForm3').validate({
            rules :{
                mi_email : {
                    required : true, //para validar campo vacio
                    email    : true  //para validar formato email
                },
                mi_nombre : {
                    required : true,
                    minlength : 3, //para validar campo con minimo 3 caracteres
                    maxlength : 9  //para validar campo con maximo 9 caracteres
                },
                mi_edad : {
                    required : true,
                    number : true   //para validar campo solo numeros
                },
                mi_pais : {
                    required :true,
                }

            }
        });    
    });
</script>

<form action="post" id="miForm3">
    Email <input type="text" class="required" name="mi_email">
     <br>
    Nombre <input type="text" class="required" name="mi_nombre">
     <br>
    Edad <input type="text" class="required" name="mi_edad">
     <br>
    Pais <select class="required" name="mi_pais">
        <option value="">Elegir</option>
        <option value="1">Peru</option>
    </select>
     <br>
    <input type="submit" value="Enviar">
</form>

Demostración:


Email
Nombre
Edad
Pais

Mensajes de error personalizados

Podriamos cambiar este mensaje "This field is required." por uno nuestro como por ejemplo "Debe llenar este campo". Se usa junto con el metodo rules poniendo el texto que queramos por cada regla(rules) puesta anteriormente. Veamos un ejemplo

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>

<script type="text/javascript">
    $(function(){
        $('#miForm4').validate({
            rules :{
                mi_email : {
                    required : true,
                    email    : true
                },
                mi_nombre : {
                    required : true,
                    minlength : 3,
                    maxlength : 9
                }
            },
            messages : {
                mi_email : {
                    required : "Debe ingresar el email",
                    email    : "Debe ingresar un email valido"
                },
                mi_nombre : {
                    required : "Debe ingresar un nombre",
                    minlength : "EL nombre debe tener un minimo de 3 caracteres",
                    maxlength : "EL nombre debe tener un maximo de 9 caracteres"
                }
            }
        });    
    });
</script>

<form action="post" id="miForm4">
    Email <input type="text" class="required" name="mi_email">
     <br>
    Nombre <input type="text" class="required" name="mi_nombre">
     <br>
    <input type="submit" value="Enviar">
</form>

Demostración:



Email
Nombre
¿Quieres ahora usar Jquery Validate con Ajax?, entonces sigue la continuación de este artículo aquí