03 junio 2015

Validaciones esenciales en Javascript paras tus formularios de HTML

  3 comentarios

Todas las letras a mayusculas

Validacion sumamente esencial, por ejemplo, para cuando quieres llevar el control de todo lo que ingresa a la base de datos, mantener la uniformidad te ayuda en cuanto a la mejor lectura.

function aMayusculas(campo) {
    var x = document.getElementById(campo).value;
    document.getElementById(campo).value = x.toUpperCase();
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="aMayusculas(document.getElementById('ejemplo1').name)" />

Solo Numeros

Muy util para campos de texto donde el usuario solo se le permite introducir numeros, como campos de moneda, enteros o numeros de telefonos. Es una de las validaciones mas sencillas pero mas utiles de Javascript

function esNumero(campo) {
    var x = document.getElementById(campo).value;
    if (isNaN(x)) {
        document.getElementById(campo).value = "";
    }
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="esNumero(document.getElementById('ejemplo1').name)" />

Solo Letras

Asi como hay campos donde solo puede introducirse numeros, existen campos en los que estos serian incoherentes, como campos de nombres, apellidos, profesion, etc. Recordemos que es mejor prevenir que lamentar, y es mejor prevenir y controlar lo que escribe el usuario antes de lamentar una base de datos llena de basura.

function soloLetras(e){
       key = e.keyCode || e.which;
       tecla = String.fromCharCode(key).toLowerCase();
       letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
       especiales = "8-37-39-46";

       tecla_especial = false
       for(var i in especiales){
            if(key == especiales[i]){
                tecla_especial = true;
                break;
            }
        }

        if(letras.indexOf(tecla)==-1 && !tecla_especial){
            return false;
        }
    }


Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeypress="return soloLetras(event)" />

Mascaras esenciales para campos de texto

Existen ademas diferentes campos los cuales tienen una formato único y que es es sin duda, irreversible, pero que a su vez, pueden presentar diferentes formas dependiendo del gusto del usuario, pero siempre, con un mismo resultado. Para evitar la falta de uniformidad del dato, es necesario usar mascaras pues garantizan que el dato introducido presente el mismo diseño y limite al usuario al mismo.


var telefono = new Array(4, 3, 2, 2); // Patron para telefono
var cuenta_bancaria = new Array(4, 4, 2, 10); // Patron para Cuent Bancaria
var cedula = new Array(1, 10); // Patron para Numero de Cedula
var RIF = new Array(1, 8, 1); // Patron para Registro de Informacion Fiscal
var fecha new Array(2, 2, 4); // Patron para Fecha (dd/mm/aaaa)

function mascara(d,sep,pat,nums){
    if(d.valant != d.value){
        val = d.value;
        largo = val.length;
        val = val.split(sep);
        val2 = '';
        for(r=0;r<val.length;r++){
            val2 += val[r];
     }
    
    if(nums){
        for(z=0;z<val2.length;z++){
            if(isNaN(val2.charAt(z))){
                letra = new RegExp(val2.charAt(z), "g");
                val2 = val2.replace(letra, "");
      }
     }
    }

    val = '';
    val3 = new Array();

 for(s=0; s<pat.length; s++){
     val3[s] = val2.substring(0, pat[s]);
     val2 = val2.substr(pat[s]);
 }

 for(q=0;q<val3.length; q++){
        if(q ==0){
            val = val3[q];
  }
  else{
            if(val3[q] != ""){
                val += sep + val3[q];
   }
  }
 }
 d.value = val;
 d.valant = val;
    }
}

Para llamar a la mascara de telefono en un campo de texto, se usa el siguiente codigo

<input placeholder="Ej: 9999-999-99-99" type="text" pattern='\d{4}[\-]\d{3}[\-]\d{2}[\-]\d{2}' onkeyup="mascara(this,'-',telefono,true)"  name="telefono" maxlength="14"/>

Para llamar a la mascara de numero de cuenta bancaria en un campo de texto, se usa el siguiente codigo

<input placeholder="Ej: 9999-9999-99-9999999999" type="text" pattern='\d{4}[\ ]\d{4}[\ ]\d{2}[\ ]\d{10}' onkeyup="mascara(this,' ',cuenta_bancaria,true)" maxlength="23" name="numero_de_cuenta">
Para llamar a la mascara de numero de cuenta bancaria en un campo de texto, se usa el siguiente codigo

<input placeholder="Ej: 9999-9999-99-9999999999" type="text" pattern='\d{4}[\ ]\d{4}[\ ]\d{2}[\ ]\d{10}' onkeyup="mascara(this,' ',cuenta_bancaria,true)" maxlength="23" name="numero_de_cuenta">
Para llamar a la mascara de cedula de identidad en un campo de texto, se usa el siguiente codigo

<input type="text" id="cedula" onkeyup="mascara(this,'-',cedula,false)" name="cedula" placeholder="Ej.: V-00000000">
Para llamar a la mascara de Registro de Informacion Fiscal (RIF) en un campo de texto, se usa el siguiente codigo

<input type="text" id="RIF" onkeyup="mascara(this,'-',RIF,false)" name="RIF" placeholder="Ej.: V-00000000-0">
Para llamar a la mascara de fecha en un campo de texto, se usa el siguiente codigo

<input type="text" id="fecha" onkeyup="mascara(this,'/',fecha,false)" name="fecha" placeholder="dd/mm/aaaa">
Con todas estas validaciones, la uniformidad, vistosidad y buen uso de tu base de datos estará garantizada.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


3 comentarios :

  1. Como se puede hacer para usar el es letra, pero que a su vez lo escriba todo en mayusculas?

    ResponderEliminar
  2. Como se puede hacer para usar el es letra, pero que a su vez lo escriba todo en mayusculas?

    ResponderEliminar
    Respuestas
    1. simple, en el evento onkeyup coloca ambas validaciones separadas por punto y coma

      Eliminar