0
179
VistasNo se puede mostrar el mensaje de error justo debajo del campo de entrada en javascript
Estoy creando una aplicación de tareas pendientes muy básica. Mi objetivo es mostrar un mensaje de error Ingrese una entrada Si el usuario presiona el botón 'agregar todo' sin ingresar ninguna entrada. Ahora, cuando presiono el botón 'agregar todo' sin ingresar ninguna entrada, no puedo ver el mensaje de error, pero cuando estoy inspeccionando, puedo ver que el mensaje de error se agregó correctamente debajo del campo de entrada.
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <p id="inp"><input type="text" name="inputText" id="userInput" /></p> <p id="add"><button class="addbtn">Add Todo</button></p> <p id="del"><button class="deletebtn">Delete Todo</button></p> </div> <script src="index.js"></script> </body> </html>índice.js
const addButton = document.querySelector('.addbtn'); const userInput = document.querySelector('#userInput'); addButton.addEventListener('click', (e) => { e.preventDefault(); const uinput = userInput.value; if(uinput === '') { const p = document.createElement('p'); const message = document.createTextNode('Please enter an input'); p.appendChild(message); userInput.appendChild(p); } else { return; } });¿Alguien puede decirme cómo puedo resolver este error y mostrar el mensaje de error en el navegador justo debajo del campo de entrada, por favor?
2 Respuestas
Responde la pregunta0
El objeto <input> no puede contener HTML ( ¿Qué es HTML interno en los elementos de entrada? )
Debe crear el nuevo <p> para el padre <p> (#inp)
índice.js:
const addButton = document.querySelector('.addbtn'); const userInput = document.querySelector('#userInput'); const inputDiv = document.querySelector('#inp'); addButton.addEventListener('click', (e) => { e.preventDefault(); const uinput = userInput.value; if(uinput === '') { const p = document.createElement('p'); const message = document.createTextNode('Please enter an input'); p.appendChild(message); inputDiv.appendChild(p); } else { return; } });0
Yo lo haría así:
<p id="inp"><input type="text" name="inputText" id="userInput" /></p> //add a dev to show your error message. <div class="errorMessage"> <p class="text-danger"></p> </div> //your script should be something like this <script> function checkValue() { var userInput = document.getElementById("#userInput").val; if(userInput == ''){ $('.errorMessage').text('Please enter an input'); document.getElementById("inp").required = true; document.getElementsByClassName("errorMessage")[0].style.display = "block"; } else{ $('.errorMessage').text(' '); document.getElementById("inp").required = false; document.getElementsByClassName("errorMessage")[0].style.display = "none"; } } $('#add').click(checkValue) </script>