Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>prueba</title>
</head>
<body>
    <form id="form" method="post" action="#">
        <label for="nombre">Nombre</label><br />
        <input id="nombre" 
               name="nombre" 
               type="text" 
               required="required" 
               pattern="[a-zA-zÑñáéíóúüÁÉÍÓÚÜ\s]+" 
               title="Sólo se permiten letras" 
               maxlength="50" 
               data-patron="1" /><br />
        <label id="err_nombre_valid" class="label_error">Este campo sólo admite letras</label>
 
        <label for="email">Email</label><br />
        <input id="email" 
               name="email" 
               type="text" 
               required="required" 
               pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){0,}(\.[a-z]{2,4})$" 
               title="Dirección de correo electrónico válida" 
               data-patron="0" /><br />
        <label id="err_email_valid" class="label_error">Introduce un email válido</label> 
 
        <input id="boton_enviar" type="submit" title="Enviar" value="Enviar" />
    </form>
</body>
</html>
 
.label_error {
    color: #f00;
    display: none;
}
 
window.onload = function(){
    var campoNombre = document.getElementById('nombre');
    var campoEmail = document.getElementById('email');
    var boton = document.getElementById('boton_enviar');
    var regNombre = new RegExp("^[a-zA-zÑñáéíóúüÁÉÍÓÚÜ\s]+$", "gi");
    var regEmail = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){1,}(\.[a-z]{2,4})$", "gi");
 
    boton.onclick = function(){
        if(/*validarFormato(campoNombre, regNombre) && */validarFormato(campoEmail, regEmail)){
            document.getElementById('form').submit();
        }
    };
};
 
function validarFormato(campo, reg){
    //console.log("PRIMERO: " + reg + " .test() " + campo.value + " = " + reg.test(campo.value));
    var cadena = "aaaa@aaaa";
    alert(reg.test(cadena));
    alert(reg.test(cadena));
    alert(reg.test(cadena));
    alert(reg.test(cadena));
    if(reg.test(campo.value)){
        //console.log("SEGUNDO: solo debería entrar si es true: " + reg + " .test() " + campo.value + " = " + reg.test(campo.value));
        console.log("true: " + campo.id);
        document.getElementById('err_' + campo.id + '_valid').style.display = 'none';
        return true;
    }
    else{
        //console.log("TERCERO: solo debería entrar si es false: " + reg + " .test() " + campo.value + " = " + reg.test(campo.value));
        //console.log("false: " + campo.id);
        document.getElementById('err_' + campo.id + '_valid').style.display = 'block';
        return false;
    }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers