0

Necesito acceder a cada una de las etiquetas que tengo dentro de un formulario para cambiarle su atributo visibility en el caso que no sea valido su valor mediante una función. Pero no hay forma que pueda acceder desde el DOM, he intentado mediante su atributo "name" o mediante un "id" pero no hay caso...

HTML:

   <form action="" id="formulario" name="miformulario" onsubmit="return validar();">
    <div> 
        <label for="usuario"> Nombre de usuario:</label>
        <input id="usuario" name="usuario" type="text" onblur="validaUsuario()"/>
        <p name="Error_Usu">El usuario debe contener entre 2 y 25 caracteres</p>  //MSG DE ERROR
    </div>

JS:

function validaUsuario(){

let formulario = document.forms["miformulario"];//ACCEDO A FORMULARIO
let usuario = formulario["usuario"].value;//ACCEDO A INPUT USUARIO    
let msg_error =      //<P>
if (usuario=="gato")

    msg_error.style.visibility='visible'             //VARIABLE CON VALOR DE <p>

}

1
  • ¿Es estrictamente necesario que debas acceder a travez del formulario? Encuentro que seria mucho mas facil acceder directamente a los nodos como por ejemplo let usuario =document.querySelector('#usuario').value el 20 nov. 2020 a las 12:02

1 respuesta 1

1

Por lo que entendí quieres tener acceso al <p> para mostrar el mensaje cuando el usuario no cumple las validaciones. La forma mas simple es colocarle una id al <p> y llamarlo con document.querySelector() o tambien document.getElementById(). y ahi puedes jugar con el atributo style.display para ocultarlo o hacerlo visible.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #usuarioMessage {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <form action="" id="formulario" name="miFormulario">
        <div id="usuarioSection">
            <label>Nombre de usuario:</label>
            <input type="text" name="usuario" id="usuario" />
            <p id="usuarioMessage">El usuario debe contener entre 2 y 25 caracteres</p>
        </div>
    </form>
    <script type="text/javascript">

        document.querySelector('#usuario').addEventListener('blur', ValidateUsuario, false);
        document.querySelector('#formulario').addEventListener('submit', Validate, false);

        function Validate(e){
            e.preventDefault();
            //Validar formulario y enviar
        }

        function ValidateUsuario(){
            let usuario = document.querySelector('#usuario').value;
            if(usuario.length < 2 || usuario.length > 25) {
                document.querySelector('#usuarioMessage').style.display = 'block';
                return false;
            }
            else {
                document.querySelector('#usuarioMessage').style.display = 'none';
            }
            return true;
        }
    </script>
</body>
</html>

Como recomendación y para tener un código mas limpio, te recomiendo separar bien tu código, no utilizar código JavaScript dentro de las mismas etiquetas de HTML ya que para luego hacer mantención a ese código, podría hacer mas difícil encontrar desde donde se llama el método de validación.

Y por ultimo un detallito es que el atributo name se lo agregas a todas las etiquetas HTML, o bueno a la mayoria y esto no siempre sirve, en la documentación especifica a que etiquetas puedes utilizarla correctamente.

3
  • Gracias Ignacio, me ha servido, revisando la documentación entiendo que en mi caso, todas las etiquetas que tienen el atributo "name" estarían bien no? un saludo!
    – Carlos
    el 20 nov. 2020 a las 15:10
  • Estan todas bien excepto por la etiqueta <p>, por eso lo deje como tip para que lo tuvieras encuenta mas adelante el 20 nov. 2020 a las 15:50
  • Así será, gracias de nuevo
    – Carlos
    el 20 nov. 2020 a las 16:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.