React: Error: la entrada minLength no funciona después de cambiar el tipo
Tengo una entrada con el tipo de contraseña con minLength 8, y tengo una palanca para cambiar el tipo a texto (palanca de contraseña).
cuando escribo con una longitud <8 y presiono enviar, no se puede enviar. pero, cuando cambio la contraseña para que cambie el tipo a texto y envíe el formulario, se puede enviar. por cierto estoy usando useRef ()
Reaccionar versión:
reaccionar: ^ 17.0.1
reaccionar-dom: ^ 17.0.1
Pasos para reproducir
- tipo carácter <minLength
- enviar formulario
- alternar tipo de formulario
- enviar formulario
Enlace al ejemplo de código: DEMO
El comportamiento actual
El formulario se envía incluso cuando está por debajo de minLength
El comportamiento esperado
El formulario no se envía cuando está por debajo de minLength
Vandoct
Todos 3 comentarios
Gracias por el informe.
Puedo detectar dos problemas:
- su demostración usa
minLength="3"no 8.
Escribir menos de 8 caracteres está bien siempre que escriba más de 2 minLengthno es compatible con IE 11: https://caniuse.com/input-minlength
Probé su demostración en Chrome 85 y no pude enviarla cuando ingresé menos de 2 caracteres.
¿Qué navegador estaba usando al probar su código?
eps1lon
en 5 nov. 2020
Estoy usando mac os 10.14.6 y el navegador Safari 13.0.5 (14608.5.12)
Olvidé algo, no escriba ningún carácter después de alternarlo
por cierto, cuando intento con Chrome 86.0.4240.183 funciona bien. creo que pasa solo en safari
Pasos para reproducir 1
- tipo carácter <minLength
- enviar formulario
- alternar tipo de formulario
- no escriba nada después de alternar
- enviar formulario
- el formulario será enviado
Pasos para reproducir 2
- tipo carácter <minLength
- enviar formulario
- alternar tipo de formulario
- escriba cualquier cosa después de alternar
- enviar formulario
- el formulario no se enviará
Vandoct
en 5 nov. 2020
Gracias, puedo reproducir esto.
Generalmente, cualquier validación se ignora si la entrada es impecable. Si envía el formulario sin escribir nada, se ignora minLength .
Safari marca correctamente el formulario como no válido si escribiste algo que no pasa todas las restricciones. Sin embargo, cuando cambia type , Safari parece considerar la entrada impecable. Por lo tanto, se envía un valor no válido si type cambió después de completar la escritura.
La pregunta es si React puede o debería solucionar esta peculiaridad o si Safari debería solucionarlo.
Editar:
Reproducción mínima sin ninguna reacción: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Si necesita este comportamiento, le sugiero que presente un error en Safari.
eps1lon
en 5 nov. 2020
Temas relacionados
jvorcak
·
3Comentarios
zpao
·
3Comentarios
framerate
·
3Comentarios
varghesep
·
3Comentarios
UnbearableBear
·
3Comentarios
Comentario más útil
Gracias, puedo reproducir esto.
Generalmente, cualquier validación se ignora si la entrada es impecable. Si envía el formulario sin escribir nada, se ignora
minLength.Safari marca correctamente el formulario como no válido si escribiste algo que no pasa todas las restricciones. Sin embargo, cuando cambia
type, Safari parece considerar la entrada impecable. Por lo tanto, se envía un valor no válido sitypecambió después de completar la escritura.La pregunta es si React puede o debería solucionar esta peculiaridad o si Safari debería solucionarlo.
Editar:
Reproducción mínima sin ninguna reacción: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Si necesita este comportamiento, le sugiero que presente un error en Safari.