Parece que no puedo apuntar al campo de área de texto en esta función.
Básicamente, estoy usando la validación HTML "requerida" para los primeros tres campos de entrada, pero para el área de texto, simplemente quiero mostrar una alerta si el campo del área de texto está vacío cuando el usuario envía el formulario.
O posiblemente, me gustaría mostrar texto dentro del campo de área de texto, indicando "por favor ingrese más información", si el usuario intenta enviar el formulario sin completar esa área.
<form action="" class="contactForm" method="POST" id="contactForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br> <label for="number">Number:</label> <input type="number" id="number" name="number" required><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br> <textarea id= "textArea" rows ="3" cols ="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br> <button id="buttonID">Submit</button> </form>JavaScript
function formValidation(e) { e.preventDefault(); const form = document.getElementById("contactForm"); const textArea = document.getElementById("textArea").value; if(textArea.value === ""){ alert("please enter more information"); } document.getElementById("buttonID").addEventListener("click", function () { form.submit(); }); } formValidation();Puede probar el siguiente enfoque. Agregue un evento onSubmit en el formulario y elimine todos los demás eventos. Agregue una condición if dentro de la función formValidation() como se muestra a continuación.
if (!textArea.value) { alert("please enter more information"); }Ahora mostrará el mensaje de alerta cuando todos los demás campos de entrada estén llenos y solo el área de texto esté vacía.
Nota: el mensaje de alerta se mostrará solo cuando los campos Nombre, Número y Correo electrónico tengan algo en ellos.
Código de trabajo:
function formValidation() { const form = document.getElementById("contactForm"); const textArea = document.getElementById("textArea").value; if (!textArea.value) { alert("please enter more information"); } } <form action="" class="contactForm" method="POST" id="contactForm" onSubmit="formValidation()"> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br> <label for="number">Number:</label> <input type="number" id="number" name="number" required><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br> <textarea id="textArea" rows="3" cols="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br> <button id="buttonID">Submit</button> </form>Bien, comencemos con el detector de eventos onsubmit :
<form action="" class="contactForm" method="POST" id="contactForm" onsubmit="formValidation(event)"> Luego simplifica el método formValidation :
function formValidation(event) { if (document.getElementById("textArea").value == "") { alert("please enter more information"); event.preventDefault(); } } Y si quiere saber por qué su código no funciona, eche un vistazo a la variable textArea que ya contiene el valor del área de texto. Luego mire su condición que intenta obtener el valor del parámetro de una cadena.