COMO VALIDAR FORMULARIOS (createFormBuilder)

50 views
Skip to first unread message

Luis Vallejos

unread,
Nov 27, 2021, 3:36:41 AM11/27/21
to symfony-es
CONTEXTO: 
Tengo un formulario y trato (mediante javacscript) de validar la entrada de datos en "tiempo real" de modo que tire un mensaje de error.

Mi formulario (ejemplo) esta de la siguiente forma:
Screenshot_1.png


MI JAVASCRIPT esta así:

 onload=function()
  {
        var number = document.querySelectorAll('.number-only')[0];
        var money = document.querySelectorAll('.money-only')[0];
        var letters = document.querySelectorAll('.letters-only')[0];
        number.onkeypress = function(e)
{
            const patternn = /^[0-9]$/;
            if(patternn.test(e.key)==false)
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="*Este campo solo acepta números";
            }
            else
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="";
            }
            return patternn.test(e.key);
        }
        number.onpaste = function(e)
{
            e.preventDefault();
        }
       
        money.onkeypress = function(e)
{
            const patternm = /^[0-9.,]$/;
            if(patternm.test(e.key)==false)
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="*Este campo solo acepta números";
            }
            else
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="";
            }
            return patternm.test(e.key);
        }
        money.onpaste = function(e)
{
            e.preventDefault();
        }
       
        letters.onkeypress = function(e)
{
            const patternl = /^[A-Za-z ]$/;
            if(patternl.test(e.key)==false)
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="*Este campo solo acepta letras";
            }
            else
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="";
            }
            return patternl.test(e.key);
        }
        letters.onpaste = function(e)
{
            e.preventDefault();
        }
        return false;
    }

EL PROBLEMA:
Cuanto tengo 2 inputs usando la misma clase, solo funciona en la primera e ignora la segunda, como lo arreglo o si pueden recomendarme otro método para validar inputs creados con un "createFormBuilder".

Jesús Clemente Gallart

unread,
Nov 27, 2021, 3:49:01 AM11/27/21
to symfo...@googlegroups.com
Buenos días, la clase formtype tiene toda la lógica de validación, te recomiendo que mires esto... https://symfony.com/doc/current/reference/forms/types.html
Por otro lado, si lo que quieres es diferenciar un campo de otro, coge su ID y utiliza getElementById().

Pero yo uso la primera opción. Es más rápida.
Un saludo.

--
--
Has recibido este mensaje porque estás suscrito al grupo "symfony-es" de Google Groups.
Para publicar en este grupo, envía un email a symfo...@googlegroups.com
Para darte de baja, envía un email a symfony-es+...@googlegroups.com
El resto de opciones puedes encontrarlas en http://groups.google.com/group/symfony-es?hl=es

---
Has recibido este mensaje porque estás suscrito al grupo "symfony-es" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a symfony-es+...@googlegroups.com.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/symfony-es/19fabbb9-4d4b-49a6-bff5-5ea4c10f42fdn%40googlegroups.com.


--

Jesús Clemente
C/Padre Urbano 19 - Bajo
46009 - Valencia

Saúl Hernández Arellano

unread,
Nov 29, 2021, 10:52:52 AM11/29/21
to symfony-es
Hace mucho que no trabajo con  JavaScript puro, generalmente uso JQuery. 

En la línea  

  var number = document.querySelectorAll('.number-only')[0];

Estas seleccionado solo al primer elemento con la clase number-only y solo al el le estas asignando el evento onkeypress. Por ende si tienes mas elementos con la misma clase a ellos no se les asigna el evento. la solución es simple:

// Seleccionas todos los elementos con la clase y les asocias el evento
document.querySelectorAll('.number-only').onkeypress = function(e)
{
            const patternn = /^[0-9]$/;
            if(patternn.test(e.key)==false)
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="*Este campo solo acepta números";
            }
            else
            {
                document.getElementById("mensaje"+e.target.id).innerHTML="";
            }
            return patternn.test(e.key);
        }
        number.onpaste = function(e)
{
            e.preventDefault();
        }
...
}

Ahora yo te recomiendo que uses JQuery te facilitara la vida con JavaScript y para validar los formularios en la vista puedes revisar JQueryValidate, es un plugin para JQuery para la validación de formularios


Ahora, no importa como hayas creado el formulario, cuando estas parado en el lado del cliente (El navegador), solo tienes HTML, CSS y JS.

Saludos

Reply all
Reply to author
Forward
0 new messages