Alert con diseño

Imagen
Hey hoy les vengo a compartir este snackAlert ó alert con diseño que e desarollado con HTML, CSS, y JS y la libreria de diseño de w3.css JS function snackAlert(msj,succes1info2warning3error4default5 = 1,time = 3000){ var x = document.getElementById("snackbar"); // Add the "show" class to DIV x.innerHTML = msj; x.className = "show snackbar"+succes1info2warning3error4default5; // After 3 seconds, remove the show class from DIV setTimeout(function(){ x.className = x.className.replace("show", ""); }, time); } HTML el html lo agregan en caulquier parte de su codigo <div class="snackbar"> </div> <button onclick="snackAlert('Hola',1)">Snack Alert</button> Tenemos varios tipos de alert 1 = success 2 = info 3 = warning 4 = error 5 = default See the Pen SnackAlert by Robert Niño ( @robert-nino ) on CodePen .

Validar automático de campos vacíos JS

Hola quisiera compartir con ustedes esta código de validación que con solo nombrarlos en la clase ya resalta los campos, yo se que ahora hay validación con HTML5 validaciones mas complejas y eficientes pero en algunos casos necesitamos algo mas simple




necesitamos los siguientes códigos JavaScript los colocan donde quieran.

JS


function limpiar_array(array,tipo)
{
    var arrayx = [];

    for(i=0;i<((array.length)+1);i++)
    {
        if(array[i] || array[i] == 0)
        {
            if(tipo == 1)
            {
                arrayx.push(array[i]);
            }else if(tipo == 2)
            {
                arrayx.push(" "+array[i]);
            }
        }
    }
    return arrayx;
}



function valida(){
var txt = document.getElementsByClassName("txt");
var tedes = document.getElementsByClassName("td");
    var error = [];
    var alerta = [];
    var aux;

    for(i=0;i<txt.length;i++)
    {

        if(txt[i].value == "" || txt[i].value == " " || txt[i].value == "  " || txt[i].value == "   " || txt[i].value == "    "|| txt[i].value == "     ")
        {
            error[i] = tedes[i].textContent;
            alerta[i] = i;
        }else
        {
            txt[i].style.cssText="";
        }
    }

    if(error.length > 0 )
    {
        error=limpiar_array(error,"2");
        document.getElementById("cuerpo_alert").style.cssText="background-color:#31B0D5; width: 100%; height-min:20px; color:#fff; text-align:center";
        document.getElementById("cuerpo_alert").innerHTML="<b>Por favor complete</b>: "+error;

        alerta=limpiar_array(alerta,"1");

        for(e=0;e<alerta.length;e++)
        {  aux = alerta[e];
            txt[aux].value = '';
            txt[aux].style.cssText="background-color:#B0CEEF; color:#fff;";
        }

        return false;

    }

}

HTML Lo colocan donde crean necesario a sus necesidades


Y ahora en todos los campos que deseamos validar agregamos la class

Titulo del campo:<lavel class="lavel">Campo Obligatorio 1</lavel>

Campo input: <input class="texto" type="text" />


See the Pen GPBMYV by Robert Niño (@robert-nino) on CodePen.

Comentarios

Entradas populares de este blog

Hora Militar a Meridiano, Hora de 24H a 12H JavaScript

¿Laravel Cómo evitar el error de TokenMismatchException?

Alert con diseño