10
 
24/08/2020

Validar datos del formulario con jQuery

Validar datos del formulario con jQueryDemostración de cómo se pueden validar los datos o campos de un formulario HTML con jQuery, implementando una lista de expresiones regulares para ello.

En esta oportunidad vamos a dejar un recurso programado en jQuery que permite ampliar los conocimientos para validar los datos o campos de un formulario de manera sencilla.

En un capítulo anterior hablamos sobre cómo se puede
calcular y mostrar los caracteres restantes de los campos tras la definición del atributo «maxlength» de los campos de un formulario HTML, pero ahora, vamos a demostrar cómo se puede validar dichos campos a través de una nueva función escrita en jQuery.

Puede comprobar el resultado a través de nuestra demo.

Validando los datos del formulario con jQuery

Lo primero que vamos hacer es solicitar es una versión reciente de la biblioteca de jQuery.

Copie y pegue el siguiente código entre las etiquetas «HEAD».

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Si lo desea, puede definir el estilo del formulario copiando y pegando el siguiente código entre las etiquetas «STYLE», sino puede optar por su propia definición.

.box_inside_elem{
display:block;
position:absolute;
bottom:0;
right:0;
width:30px;
font-size:14px;
padding:0 5px;
box-sizing:border-box;
background-color:#CDCDCD;
border:1px solid #A1A1A1;
color:#666;
text-align:center;
font-weight:bold;
}
.elem_form{
position:relative;
display:block;
width:100%;
height:auto;
margin:10px auto;
padding:10px 10px;
box-sizing:border-box;
font-size:14px;
outline:none;
}

Código jQuery para validar los datos:

Copie y pegue el siguiente código entre las etiquetas «HEAD» o «BODY».

<script type="application/javascript">
$(function(){
var _fb_=function(){
"use strict";
if($("form").length>0){
var _fa_=function(){
const obj={
alphanumeric:
{
regex: /^([a-zá-źA-ZÁ-Ź0-9\s]+)$/i,
referee: "test"
},
names:
{
regex: /^[a-zA-Zá-źÁ-Ź\s]{2,60}$/i,
referee: "test"
},
message:
{
regex: /(?:^[a-zá-ź0-9\w\s\"\“\”\«\»\,\.\(\)\-\:\?\¿\!\¡\#\@\;\&\=\/]+)$/gi,
referee: "exec"
},
sex:
{
regex: /^(f|m|o){1}$/i,
referee: "test"
},
countryES:
{
regex: /^(ae|ar|at|au|be|bg|bo|br|bs|bz|ca|ch|cl|co|cr|cy|cz|de|dk|do|ec|ee|eg|es|fi|fr|gb|gh|gr|gt|gy|hk|hn|hr|ht|hu|id|ie|il|in|is|it|jm|jo|jp|ke|kr|kw|ky|lb|lt|lu|lv|ma|mt|mv|mx|my|ng|ni|nl|no|nz|pa|pe|ph|pk|pl|pt|py|qa|ro|ru|sa|se|sg|si|sk|sr|sv|th|tr|tt|tw|tz|ua|ug|us|uy|ve|vn|xy|za|zm){1,2}$/i,
referee: "test"
},
letters:
{
regex: /^[a-z0-9á-źÁ-Ź\#]{1,}[a-zá-źA-ZA-ZÁ-Ź0-9\s\.\,\#\@]*$/i,
referee: "test"
},
onechar:
{
regex: /^[a-zA-Z-á-ź]{1}$/,
referee: "test"
},
numeric:
{
regex: /^[-]?[0-9]+$/,
referee: "test"
},
taxinfo:
{
regex: /^[a-z0-9\-]{1,}[a-z0-9\s\.\-]*$/i,
referee: "test"
},
phone:
{
regex: /^(\+[0-9]+)(?:[\s]{1,1})*?(?:\([0-9]{1,4}\))(?:[\s]{1,1})*?(?:[\s0-9\-\/])*$/,
referee: "test"
},
email:
{
regex: /^[\w\-]+(\.[\w\-]+)*@{1,1}([\w\-]+\.)*[\w\-]{2,200}\.([a-zA-Z]{2,6}|es|aero|asia|arpa|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|movie|name|net|org|com\.ve|com\.ar|com\.co|com\.br|com\.cl|com\.mx|com\.pe)$/,
referee: "test"
},
login:
{
regex: /^[_a-zA-Z0-9\-]{4,30}$/,
referee: "test"
},
password:
{
regex: /^[\w\-\#\$\%\.\,]{8,30}$/i,
referee: "test"
},
dd_mm_yyyy:
{
regex: /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})+$/,
referee: "test"
},
date:
{
regex: /^([0-9]{4})-([0-9]{2})-([0-9]{2})+$/,
referee: "test"
},
timestamp:
{
regex: /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})+$/,
referee: "test"
},
datetime:
{
regex: /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})+$/,
referee: "test"
},
socialacount:
{
regex: /^(@[a-zA-Z0-9\.\_\-]{1,60})$/,
referee: "test"
},
domain:
{
regex: /^(https:|http:)\/\/((www\.)|[a-z\_\-]+\.)?([a-zA-Z0-9\_\-\/]+)((\.)(\bcom\b|\bnet\b|\borg\b|\bbiz\b|\binfo\b|\bxyz\b|\bonline\b|\bclub\b|\bdev\b|\blive\b|\bspace\b|\bapp\b|\bsite\b|\bshop\b|\blife\b|\bio\b|\bstore\b|\btech\b|\bnews\b|\bmedia\b|\bdesign\b|\bguru\b|\bphotography\b|\bglobal\b|\brocks\b|\btoday\b|\bmovie\b|\bco\b))(\.[a-z]{2})?(\/)?$/,
referee: "test"
},
sha1:
{
regex: /^[a-zA-Z0-9]{40}$/,
referee: "test"
},
sha256:
{
regex: /^[a-zA-Z0-9]{64}$/,
referee: "test"
}
}; return (typeof obj!=="undefined"&&typeof obj=="object")?obj:null;
}
/* Se asigna "_fa_()" a la variable objPatt */
var objPatt=(typeof _fa_()!=="undefined"&&typeof _fa_()=="object")?_fa_():"undefined";
if(objPatt=="undefined"){console.error("Error: el objeto 'objPatt' no existe.");return;}
var _val_date_=function(a){
var newdate="";
var token="-";
var mydate;
if(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})+$/.test(a)){
mydate = a.replace(/(\/)/g,token).split(token);
for(var i=(mydate.length-1);i>=0;i--){
newdate+=mydate[i]+"-";
}
newdate=newdate.slice(0,-1);
}
var date=new Date(newdate),result=(!Number.isNaN(Date.parse(date)))?Date.parse(date):0;
return result;
}
var _val_form_o_t_=function(){
var _k_d_=[]; $("form").find("input[type=text],input[type=password],input[type=hidden],textarea,input[type=checkbox],select").each(function(idx,elem){
var _f_=$(this),_f_n_=_f_.attr("name"),_i_v_= typeof _f_.attr("placeholder")!=="undefined"?_f_.attr("placeholder").trim():null,_maxlen_=_f_.attr("maxlength");
_f_.val("").css({"border":"1px solid #A1A1A1"});
if(_i_v_!==null){
_f_.prop("placeholder",_i_v_);
_f_.addClass("_error_data_form_");
_f_.on("click focus",function(e){
e.preventDefault();
var _f_n_=_f_.attr("name"),
_p_k_=_k_d_.indexOf(_f_n_);
if(_p_k_<0){
if(_f_.is("select")){
if(_p_k_>=0){
_k_d_.splice(_p_k_,1);
}
_k_d_.push(_f_n_);
}
}
}).on("keydown",function(e){
var _f_n_=_f_.attr("name"),
_p_k_=_k_d_.indexOf(_f_n_);
if(_p_k_>=0){
_k_d_.splice(_p_k_,1);
}else{
_f_.val(null);
}
_k_d_.push(_f_n_);
}).on("change",function(e){
var _f_n_=_f_.attr("name"),_p_k_=_k_d_.indexOf(_f_n_);
if(_p_k_>=0){
_k_d_.splice(_p_k_,1);
}
_k_d_.push(_f_n_);
}).on("focusout blur",function(e){
var _f_n_=_f_.attr("name"),_p_k_=_k_d_.indexOf(_f_n_);
if(_f_.val().length===0){
if(_p_k_>=0){
_k_d_.splice(_p_k_,1);
}
} else {

// Validando los datos

var _t_d_r_=false;
if(_p_k_>=0){
var validator=typeof _f_.attr("validator")!=="undefined"?_f_.attr("validator"):"message";
var _m_y_=typeof _f_.attr("maxyears")!=="undefined"?_f_.attr("maxyears"):null;
if(!__f__v__p__t__(_f_.val(),validator)){
_t_d_r_=false;
}else{
if(validator=='date'||validator=='dd_mm_yyyy'){
if(!_val_date_(_f_.val())){
_t_d_r_=false;
} else { _t_d_r_=true; }
}else{
_t_d_r_=true;
}
}
}
if(_t_d_r_===false){
_f_.addClass("_error_data_form_");
_f_.css({"border":"1px solid #FF0000"});
}else{
_f_.removeClass("_error_data_form_");
_f_.css({"border":"1px solid #008000"});
}
}
});
}
});
}
var _reset_form_o_t_=function(){
$("form").on("reset",function(e){
_val_form_o_t_();
return true;
});
return false;
}
_val_form_o_t_();

// Enviando el formulario

$("form").on("submit",function(e){
var _f_e_e_f_=$("._error_data_form_:first"),
_p_=_f_e_e_f_.offset(),
_f_=_f_e_e_f_.focus();
if(_f_e_e_f_.length==0){
var _f_s_=$("form").find("input[type=submit]"),
_e_f_r_=$("._eno_form_response_"),
_p_e_f_r_=_e_f_r_.offset();
var _s_=$(this).serialize(),
_u_=$(this).prop("action");
var request=$.ajax({
method:"POST",
url:_u_,
data:_s_,
dataTypes:"json",
cache:false,
timeout:10000
});
request.done(function(response){
if(typeof response!=="undefined" && null!==response && response!==""){

/* Aquí la respuesta de ajax */

_f_s_.val("Enviando...");
_f_s_.prop("disabled",true);
$("._eno_form_response_").html("Los datos fueron enviados correctamente...").css({"background-color":"#D9FFD6","color":"#008000"}).fadeIn().fadeOut(10000);
setTimeout(function(){
_f_s_.val("Enviar").fadeIn(1000);
_f_s_.prop("disabled",false);
},10000);
_val_form_o_t_();
}else{
_f_s_.val("Enviando...");
_f_s_.prop("disabled",true);
$("._eno_form_response_").html("Error: No podemos ofrecerte una respuesta del proceso en este momento.").css({"background-color":"#FFD8D6","color":"#FF0000"}).fadeIn().fadeOut(10000);
setTimeout(function(){
_f_s_.val("Enviar").fadeIn(1000);
_f_s_.prop("disabled",false);
},10000);
_val_form_o_t_();
}
if(typeof _p_e_f_r_!=="undefined"&&typeof _p_e_f_r_.top!=="undefined"){
$("html, body").animate({scrollTop:_p_e_f_r_.top-50},"300");
}
});

request.fail(function(jqXHR,textStatus){
_f_s_.val("Enviando...");
_f_s_.prop("disabled",true);
$("._eno_form_response_").html("Error: problemas de conexión. Inténtalo de nuevo.").css({"background-color":"#FFD8D6","color":"#FF0000"}).fadeIn().fadeOut(10000);
setTimeout(function(){
_f_s_.val("Enviar").fadeIn(1000);
_f_s_.prop("disabled",false);
},10000);
return false;
});

} else {
$("html,body").animate({scrollTop:_p_.top-50},"300");
}
return false;
});

function __f__v__p__t__(value,validator){
var val = value;
var patt = "";
var ref= "";
var allow = validator;
var correct = typeof objPatt !== "undefined" && typeof allow !== "undefined" && typeof objPatt[allow] !== "undefined" && objPatt[allow].regex !== "undefined" && objPatt[allow].referee !== "undefined";
var res = false;
if(correct){
patt = objPatt[allow].regex;
ref = objPatt[allow].referee;
if(ref==="test"){
res = patt.test(val);
} else if(ref==="exec"){
res = __f__r__e__c__(patt, val);
}
} else {
res = false;
}
return res;
}

function __f__r__e__c__(regex,string){
var str=string;
let m;
while((m=regex.exec(str))!==null){
if(m.index===regex.lastIndex){
regex.lastIndex++;
}
var exist=0;
m.forEach(function(e,i){
if(e!==null){
exist=1;
}
if(exist>0){
//console.log("true");
return exist;
}
});
}
return exist;
}

}
}();
});
</script>

Nota: La función anónima "_fa_()" retorna un objeto de tipo literal con una lista de tipos de datos para validar los campos del formulario mediante Expresiones Regulares.

Lista de datos:
  • alphanumeric
  • names
  • message
  • sex
  • countryES
  • letters
  • numeric
  • onechar
  • taxinfo
  • email
  • phone
  • login
  • password
  • date (yyyy-mm-dd)
  • dd_mm_yyyy (dd/mm/yyyy)
  • socialacount (@socialacount)
  • domain
  • sha1
  • sha256

La función anónima "_val_date_()" permite validar una fecha como formato "date", cuando el formato es europeo o suramericano (ej:"dd/mm/yyyy").

La función anónima "_val_form_o_t_()" es quien realiza la validación en cada uno de los campos del formulario, al escribir los datos y antes de enviar el formulario.

La función anónima "_reset_form_o_t_()" solamente inicializa los valores cuando el botón de "restaurar", "inicializar" o "reset" es pulsado.

Definiendo nuestro formulario HTML:

Copie y pegue el siguiente código entre las etiquetas «BODY» de su archivo html (ej:archivo.html).

<form action="archivo.html" autocomplete="off">
<fieldset>
<legend>Información Requerida</legend>
<div style="position:relative;width:auto;"><input type="text" name="names" placeholder="Ingrese su nombre" maxlength="40" class="elem_form" validator="names"></div>
<div style="position:relative;width:auto;"><input type="text" name="email" placeholder="Ingrese su correo" maxlength="60" class="elem_form" validator="email"></div>
<div style="position:relative;width:auto;"><input type="text" name="birthday" placeholder="Fecha de nacimiento (dd/mm/yyyy)" maxlength="10" class="elem_form" validator="dd_mm_yyyy"></div>
<div style="position:relative;width:auto;"><textarea name="message" placeholder="Por favor escriba su mensaje" maxlength="140" class="elem_form" validator="message"></textarea></div>
<input type="submit" value="Enviar">
</fieldset>
</form>

En cada uno de los campos existe un atributo que hemos definido como "validator" y que hace referencia a la lista de datos previamente existente en la función anónima "_fa_()".

Las funciones "__f__v__p__t__()" y "__f__r__e__c__()" son las que realmente nos ofrecen un resultado verdadero o falso sobre las validaciones de los datos ingresados en los campos del formulario. Sin ellas, el objetivo de este artículo no se cumple.

Una demostración de todo el código explicado aquí se puede verificar a través de un archivo HTML.
Consulta Lo+ Top de Lenguajes De Programación
Todos los titulares en un solo lugar...