[SOLUCIONADO] Misma expresion regular para html5 y javascript

[jevy99]

Buenas.

No es el primer tema que abro en el foro, pero espero que tenga más éxito que los otros, en los que no he recibido ninguna respuesta y sigo con dudas XD. Es posible que estuvieran mal de alguna manera, pero es raro ya que no hay respuestas ni siquiera para insultar jaja.

En fin, vamos a mi duda.

Estoy haciendo una validación de un formulario tanto con el atributo pattern de HTML5 como con JS (y si ambos pasan haré la validación final en servidor).
El caso es que quiero que el JS tenga el menor número posible de variables con valores literales (escritos a mano en el mismo JS), para que me pueda servir para otros ficheros HTML con el menor número de modificaciones posibles.
Así pues, todas las variables que necesito recogen el valor del HTML de forma dinámica y si en algún momento cambio algo, no tendré que modificar el JS.

El problema está en que el atributo pattern y las funciones para buscar expresiones regulares de JS no funcionan igual.

El campo que me da problemas es el de Nombre. Quiero que sólo se puedan introducir letras y espacios (ya tengo la validación por si sólo se ponen espacios en blanco).

Código HTML:

<input id="nombre" name="nombre" type="text" required="required" [B]pattern="[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+"[/B] title="Sólo se permiten letras" maxlength="50" />
 

Ya he comprobado que canta si se introduce cualquier otro valor.

Entonces lo recojo en JS así:

Código Javascript:

pattern = campo.getAttribute('pattern');
 

La peli viene en que no sé cómo hacer que cante si encuentra otro carácter, porque tanto .test() como .match() dan true si encuentran el patron en el valor, aunque tenga otros caracteres.
Es decir:

Código Javascript:

alert("Probamos con test()");
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test("asd")); // true
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test("asd asd")); // true
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test(" asd ")); // true
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test("asd12")); // true
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test("asd12asd")); // true
alert(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/.test("12")); // false
 
alert("/////////");
 
alert("Probamos con match()");
alert("asd".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // asd
alert("asd asd".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // asd asd
alert(" asd ".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // asd (probablemente también ponga los espacios, pero es difícil de decir ;)
alert("asd12".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // asd
alert("asd12asd".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // asd
alert("12".match(/[a-zA-zÑñáéíóúüÁÉÍÓÚÜ ]+/)); // null
 

Pues bien, a ver si hay suerte y alguien puede ayudarme.
Lo que necesito es una sola expresión regular que me sirva en ambas validaciones o un método de JS que encuentre coincidencias exactas entre la cadena y el patrón.
O también me sirve cualquier otra idea que se os ocurra.

Gracias de antemano.
Un saludo;

[Alexis88]

Podrías utilizar el objeto RegExp para crear una expresión regular con el patrón dado. Además, tienes la posibilidad de añadir modificadores de patrón, como la "g" para búsquedas globales y la "i" para no hacer diferencias entre mayúsculas y minúsculas.

Código Javascript:

var regexp = new RegExp(elemento.pattern, "gi");
 

Saludos

[jevy99]

Gracias por la respuesta, pero como dicen en el foro de Steam, "not work for me".

He buscado el objeto RegExp pero apenas encuentro documentación.
En realidad ya lo estaba usando, solo que sin los flags "g" e "i", aunque tampoco me ha servido.

Vuelvo a describir el problema:
Las funciones de expresiones regulares en JS buscan una coincidencia entre toda la cadena y yo necesito que toda la cadena sea una única coincidencia.

He seguido avanzando y resulta que me pasa lo mismo con la validación del Email.
He usado una regexp típica para esto, que he encontrado en alguna web:
/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){0,}(\.[a-z]{2,4})$/gi (se pueden agregar flags como si del constructor de RegExp se tratase).
No hace lo que se supone que tiene que hacer. Resulta que si pongo la cadena "aaaa@aaaa" da positivo en la búsqueda. A pesar de que se le está diciendo que antes de los {2,4} últimos caracteres tiene que llevar si o si un ".", pero lo más curioso es que si la cadena es "aaaa@aaa" (tres caracteres después de la "@" en lugar de cuatro) la búsqueda es negativa.

No entiendo mucho de expresiones regulares y sé que se me puede estar escapando algo, pero la he comprobado en [URL="http://regexper.com/"]Regexper[/URL], y he probado su comportamiento en [URL="http://www.regexr.com/"]RegExr[/URL], [URL="http://regexpal.com/"]Regexpal[/URL] y [URL="http://www.metriplica.com/es/recursos/expresiones-regulares"]Metriplica[/URL], y en todas me da el resultado que se supone que tiene que dar, mas corriéndolo en JS hace lo que le sale del ****.

Estoy realmente quemado con esto jaja.

Saludos;

[PHPeros]

Código HTML:

<input type="email">
 

[Alexis88]

Iniciado por jevy99

He buscado el objeto RegExp pero apenas encuentro documentación [...]

Iniciado por Alexis88

Podrías utilizar el objeto RegExp [...]

La palabra resaltada en anaranjado, es un enlace que te redirigirá hacia la documentación ofrecida por la MDN, la cual es una de las más fidedignas que hay en la web, junto con la de ECMAScript y la W3.

En cuanto a la validación que comentas con el e-mail, ¿estás seguro? Acabo de hacer la prueba y no ocurre lo que dices.

De cualquier forma, tienes a disposición el <input type="email"> de HTML5 para evitar validar manualmente el correo electrónico ingresado por el usuario, aunque, para validar del lado del servidor, sí será necesario el uso de la expresión regular.

Un saludo

[jevy99]

Buenas.

En primer lugar, gracias a los dos, pero esto ya es algo personal.

En cuanto a la validación que comentas con el e-mail, ¿estás seguro? Acabo de hacer la prueba y no ocurre lo que dices.

La verdad es que ya no estoy seguro de nada, pero ya dije que las pruebas en validadores online me daban correctas, no así al ejecutar mi script. He hecho la siguiente prueba (es un fichero entero para que sólo haya que copiar en un documento html y ejecutarlo):

Código HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
        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-]+){0,}(\.[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;
            }
        }
    </script>
    <style type="text/css">
        .label_error {
            color: #f00;
            display: none;
        }
    </style>
    <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>
 

Y resulta que cada vez que hace el test(), si tiene que dar true, los valores se alternan.
Es decir, que si el patrón debe dar false, va a dar false todo el rato, pero si debe dar true, cada vez par que ejecute el test() da false.
Fíjate de todas formas en que alert(reg.test("aaaa@aaaa")); da true como primer resultado.

No entiendo nada.

A, y por cierto, ya me fijé en que me dabas un enlace, pero tampoco me sirvió. Gracias de todas formas.

Un saludo;

[Alexis88]

El error salta a la vista: estás permitiendo que, luego del texto que va luego del arroba y antes del punto, hayan cero o más caracteres. Ese es el error, que permites ingresar un "ejemplo@dominio" cuando debería de ser "[email protected]".

Cambia esto:

Código Javascript:

var regEmail = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){0,}(\.[a-z]{2,4})$", "gi");
 

Por esto:

Código Javascript:

var regEmail = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){1,}(\.[a-z]{2,4})$", "gi");
 

DEMO

Iniciado por jevy99

A, y por cierto, ya me fijé en que me dabas un enlace, pero tampoco me sirvió [...]

Jamás digas eso. Toda información siempre es útil y valiosa; que no le hayas podido sacar partido porque no la entendiste, no quiere decir que "no te haya servido". Y si no entiendes algo, pregunta. Es gratis (al menos acá ).

Un saludo

[jevy99]

Iniciado por Alexis88

El error salta a la vista: estás permitiendo que, luego del texto que va luego del arroba y antes del punto, hayan cero o más caracteres. Ese es el error, que permites ingresar un "ejemplo@dominio" cuando debería de ser "[email protected]".

Ferpecto, una cosa menos. Gracias!!

Iniciado por Alexis88

Jamás digas eso. Toda información siempre es útil y valiosa; que no le hayas podido sacar partido porque no la entendiste, no quiere decir que "no te haya servido". Y si no entiendes algo, pregunta. Es gratis (al menos acá ).

Bueno, me refería al contexto. Me valió para saber cómo meter los flags en el constructor de RegExp(), pero no me solucionó la peli.

Pero aún quedan dos cosas:

1. Solucionar lo del nombre. Lo que se me ha ocurrido es ponerle el símbolo de negación "^", por ejemplo, preguntando en un if(si el patrón es para sólo letras) {le metes la negación para que quede así: "[^a-zA-zÑñáéíóúüÁÉÍÓÚÜ\s]+", y si encuentra algo que no valide.

2. ¿Alguien sabe por qué se alternan los resultados cuando se hacen varios test() seguidos y tiene que dar sólo true?

Un saludo;

[IsaBelM]

ese patrón no es correcto ya que admite algo como "juan andrés de todos los santos ruiz de alarcón cuesta". un nombre puede ser simple o compuesto

/^(([a-z\xc0-\xff]+)((\s)([a-z\xc0-\xff]+))?)$/i

para la segunda pregunta lee este post

[jevy99]

Buenas.

Muy bueno lo del flag global en el patrón. Ya daba este tema por perdido. De hecho he creado una función para validar el email. Muchísimas gracias.
Ya no es necesaria la función, pero por si a alguien le sirviera, igual que a mi me habéis ayudado no está demás que yo lo intente con otras personas, es esta:

Código Javascript:

function validarEmail(email) {
    var carProhibidos = " ;:,/\\|\"\'$#%()=";
    for(i = 0; i < carProhibidos.length; i++) {
        var noValido = carProhibidos.charAt(i)
        
        if(email.indexOf(noValido, 0) > -1) {
            return false;
        }
    }
    
    var arroba = email.indexOf("@", 1);
    if(arroba == -1) {
        return false;
    } else {
        if(email.indexOf("@", arroba + 1) > -1) {
            // Si hay otra @ después de la primera
            return false;
        } else {
 
            var posPunto = email.indexOf(".", arroba + 1);
            if(posPunto == -1) {
                return false;
            } else if(posPunto == arroba + 1) {
                return false;
            } else {
 
                var ultimaPosicion = posPunto;
                while(posPunto > -1) {
                    // Mientras que no haya más puntos después del anterior
                    posPunto = email.indexOf(".", ultimaPosicion + 1);
                    if(posPunto == ultimaPosicion + 1) {
                        // Hay dos puntos seguidos
                        return false;
                    }
                    if(posPunto > -1) {
                        // Hará otra iteración
                        ultimaPosicion = posPunto;
                    }
                }
                if(ultimaPosicion + 2 >= email.length || ultimaPosicion + 4 < email.length){
                    // Si tiene 1 o más de 3 caracteres tras el último punto
                    return false;
                }       
            }
        }
    }
    return true;
}
 

En cuanto a lo que dices de la otra expresión regular, no sé si te entiendo. No veo ningún problema en que haya nombres compuestos y si es uno demasiado largo ya tengo puesto un maxlength. Y, como veo que no lo he dicho antes, sólo tengo un input para nombres y apellidos, y por eso lo de permitir espacios.

Muchas gracias.

Un saludo;

[IsaBelM]

no importa que el campo sea también los apellidos, la expresión sigue siendo incorrecta. la expresión admite espacios al principio y al final de la cadena, y puede haber más de 1 espacio entre las subcadenas. una expresión más adecuada sería esta

/^([a-z\xc0-\xff])(([a-z\xc0-\xff]+)(\s))+([a-z\xc0-\xff]+)$/i

por otro lado si vas a validar el email usando una función te recomiendo esta http://www.forosdelweb.com/f13/faqs-...ml#post2470633

[jevy99]

Buenas.

No he tenido tiempo de probarlo, pero quería pasar a agradecéroslo. Es lo menos después de la ayuda recibida.
Intentaré mirarlo el sábado y responder con los resultados, aunque son prometedores.

Un saludo;

[jevy99]

Buenas noches.

Ya lo he probado y el resultado es excelente.
En el nombre uso la misma expresión regular, la que proporcionas, para validar en el html (pattern) y en el js, y con el mail uso la función que indicas.
Todo funciona correctamente.

Muchas gracias.
Un saludo;