martes, 8 de junio de 2021

100 días de código Javascript... 7ma parte


Ejemplo. Validar datos con Javascript.
main.js
document.addEventListener("DOMContentLoaded", function(event) {
    
    console.log('Se ha ejecutado código JS');
    const btnActivar = document.getElementById("btnActivar");

    function activarEnvio(){
         alert("Enviando los datos...");
    }


    var tabla1Fila1 = false;
    var tabla1Fila2 = false;
    var tabla1Fila3 = false;

    var tabla2Fila1 = false;
    var tabla2Fila2 = false;
    var tabla2Fila3 = false;
   

    function validarFormulario(){
    var nomProd1 = "";
    var monto1 = "";
    var numContrato1 = "";
    
    if(nomProd1!=""){
      if(nomProd1!=""&&monto1!=""&&numContrato1!=""){
         document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
      }else{
        document.getElementById("prrfError1").style.color="red";
        document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
        document.getElementById("infoError1").style.display="block";
      }
    }else{
        if(monto1!=""&&numContrato1!=""){
           document.getElementById("prrfError1").style.color="red";
           document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
           document.getElementById("infoError1").style.display="block";
        }else{
           document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
        }
    }

    var nomProd2 = "";
    var monto2 = "";
    var numContrato2 = "";

    if(nomProd2!=""){
      if(nomProd2!=""&&monto2!=""&&numContrato2!=""){
         document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
      }else{
        document.getElementById("prrfError2").style.color="red";
        document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla 1 fila 2.";
        document.getElementById("infoError2").style.display="block";
      }
    }else{
        if(monto2!=""&&numContrato2!=""){
           document.getElementById("prrfError2").style.color="red";
           document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla1 fila 2.";
           document.getElementById("infoError2").style.display="block";
        }else{
           document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
        }
    }

    var nomProd3 = "";
    var monto3 = "";
    var numContrato3 = "";

    if(nomProd3!=""){
      if(nomProd3!=""&&monto3!=""&&numContrato3!=""){
         document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
      }else{
        document.getElementById("prrfError3").style.color="red";
        document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1 fila 3.";
        document.getElementById("infoError3").style.display="block";
      }
    }else{
        if(monto3!=""&&numContrato3!=""){
           document.getElementById("prrfError3").style.color="red";
           document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1  fila 3.";
           document.getElementById("infoError3").style.display="block";
        }else{
           document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
        }
    }



   var tv1 = "9";
   var nb1 = "4";
   var nt1 = "7";
   var cp1 = "12";
   var s1 = "1234";
   var pt1 = "1200";

   if(tv1!=""){
      if(tv1!=""&&nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
         document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
      }else{
        document.getElementById("prrfError4").style.color="red";
        document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2  fila 1.";
        document.getElementById("infoError4").style.display="block";
      }
    }else{
        if(nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
           document.getElementById("prrfError4").style.color="red";
           document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2 fila 1.";
           document.getElementById("infoError4").style.display="block";
        }else{
           document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
        }
    }


   var tv2 = "B";
   var nb2 = "y";
   var nt2 = "6";
   var cp2 = "99";
   var s2 = "1204";
   var pt2 = "1900";

    if(tv2!=""){
      if(tv2!=""&&nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
         document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
      }else{
        document.getElementById("prrfError5").style.color="red";
        document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
        document.getElementById("infoError5").style.display="block";
      }
    }else{
        if(nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
           document.getElementById("prrfError5").style.color="red";
           document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
           document.getElementById("infoError5").style.display="block";
        }else{
           document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
        }
    }



   var tv3 = "G";
   var nb3 = "8";
   var nt3 = "87";
   var cp3 = "4";
   var s3 = "8";
   var pt3 = "88";


    if(tv3!=""){
      if(tv3!=""&&nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
         document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
      }else{
        document.getElementById("prrfError6").style.color="red";
        document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
        document.getElementById("infoError6").style.display="block";
      }
    }else{
        if(nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
           document.getElementById("prrfError6").style.color="red";
           document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
           document.getElementById("infoError6").style.display="block";
        }else{
           document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
        }
    }
   }



    btnActivar.addEventListener("click", ()=>{
        console.log("Verificar datos");
        validarFormulario();
        if(tabla1Fila1 && tabla1Fila2 && tabla1Fila3 && tabla2Fila1 && tabla2Fila2 && tabla2Fila3){
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Ya no hay errores, listo para enviar datos.";
           document.getElementById("prrfFinal").style.color="blue";
           activarEnvio();
        }else{
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Hay errores, corrigalos por favor";
           document.getElementById("prrfFinal").style.color="red";
        }

    });



});

index.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
  <title>Ejemplos en JS</title>
</head>
<script type="text/javascript" src="main.js">
</script>

<style type="text/css">
#infoError1{
  display: none;
}
#prrfError1{
  text-align: center;
}

#infoError2{
  display: none;
}
#prrfError2{
  text-align: center;
}

#infoError3{
  display: none;
}
#prrfError3{
  text-align: center;
}

#infoError4{
  display: none;
}
#prrfError4{
  text-align: center;
}

#infoError5{
  display: none;
}
#prrfError5{
  text-align: center;
}

#infoError6{
  display: none;
}
#prrfError6{
  text-align: center;
}


#infoFinal{
  display: none;
}
#prrfFinal{
  text-align: center;
}




</style>
<body>
  <h1>Programando en JS</h1>
  
  <div id="infoError1">
    <p id="prrfError1"></p>
  </div><br/>
  <div id="infoError2">
    <p id="prrfError2"></p>
  </div><br/>
  <div id="infoError3">
    <p id="prrfError3"></p>
  </div><br/>
  <div id="infoError4">
    <p id="prrfError4"></p>
  </div><br/>
  <div id="infoError5">
    <p id="prrfError5"></p>
  </div><br/>
  <div id="infoError6">
    <p id="prrfError6"></p>
  </div>
   <br/>
   <div id="infoFinal">
    <p id="prrfFinal"></p>
  </div>

  <div id="btnDiv">
  <button id="btnActivar">Verfificar</button>
  </div>
</body>
<html>

Validar RFC:
 <script>
            function rfcValido(rfc, aceptarGenerico = true) {
    const re = /^([A-ZÑ&]{3,4}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/;
    var validado = rfc.match(re);

    if (!validado)  // Coincide con el formato general del regex?
        return false;

    // Separar el dígito verificador del resto del RFC
    const digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join(''),
        len = rfcSinDigito.length,

        // Obtener el digito esperado
        diccionario = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        indice = len + 1;
    var suma,
        digitoEsperado;

    if (len == 12) suma = 0
    else suma = 481; // Ajuste para persona moral

    for (var i = 0; i < len; i++)
        suma += diccionario.indexOf(rfcSinDigito.charAt(i)) * (indice - i);
    digitoEsperado = 11 - suma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    else if (digitoEsperado == 10) digitoEsperado = "A";

    // El dígito verificador coincide con el esperado?
    // o es un RFC Genérico (ventas a público general)?
    if ((digitoVerificador != digitoEsperado)
        && (!aceptarGenerico || rfcSinDigito + digitoVerificador != "XAXX010101000"))
        return false;
    else if (!aceptarGenerico && rfcSinDigito + digitoVerificador == "XEXX010101000")
        return false;
    return rfcSinDigito + digitoVerificador;
}


        </script>

Validar RFC
function rfcValido(rfc) {
    var re = /^([ A-ZÑ&]?[A-ZÑ&]{3}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/,
        validado = rfc.match(re);
	
    if (!validado)  //Coincide con el formato general?
    	return false;
    
    //Separar el dígito verificador del resto del RFC
    var digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join('')
        
    //Obtener el digito esperado
    var diccionario  = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        lngSuma      = 0.0,
        digitoEsperado;

    if (rfcSinDigito.length == 11) rfc = " " + rfc; //Ajustar a 12
    for(var i=0; i<13; i++)
        lngSuma = lngSuma + diccionario.indexOf(rfcSinDigito.charAt(i)) * (13 - i);
    digitoEsperado = 11 - lngSuma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    if (digitoEsperado == 10) digitoEsperado = "A";
  
	//El dígito verificador coincide con el esperado?
    return digitoVerificador == digitoEsperado;
}
Continuaremos con más post sobre Javascript.

No hay comentarios:

Publicar un comentario