Estoy escribiendo un programa HTML/CSS/JavaScript que debería mostrar un formulario que solicita el nombre completo y la fecha de cumpleaños y luego verifica si la entrada está vacía. Si la entrada está vacía, deberíamos recibir un mensaje de alerta.
He escrito el siguiente código pero no recibo ningún mensaje de alerta. No sé dónde está el problema.
function FormValidation() { var Name=document.getElementById("Name").value; if (Name == ""){ alert("Please enter your name!"); return false; } var BDate=document.getElementById("BDate").value; if (BDate == ""){ alert("Please enter your BirthdayDate!"); return false; } } body { background-color: #90AFC5; color: black; width: 400px; } <form onSubmit="return FormValidation()"> <table class="information"> <tr> <td><label for="Name">Full Name</label></td> <td> <input type="text" id="Name" name="Name"><br><br></td> </tr> <tr> <td><label for="BDate">Birthday Date</label></td> <td><input type="text" id="BDate" name="BDate"><br><br></td> </tr> </table> <input type="submit" style="border-radius:15px;width:40%;background-color:green;text-align:center;color:white" value="Submit" onclick="FormValidation()"> </form> /* use querySelector() method to select the input fields and the form */ const fullName = document.querySelector('#fname'); const birthDay = document.querySelector('#bday'); const form = document.querySelector('#myForm'); /* Before submting the form, develop two functions for validating values of the form fields */ //Validate the fullName field const validateFullName = () => { if (!fullName.value.trim()) { console.log('Full name is required'); return false; } else { return true; } } //Validate the birthDay field const validateBirthDay = () => { if (!birthDay.value.trim()) { console.log('Birthday is required'); return false; } else { return true; } } /* Attach the submit event listener to the form by using the addEventListener() method In the event listener, you need to call the e.preventDefault() to prevent the form from submitting once the submit button is clicked */ form.addEventListener('submit', function(e) { if (!validateFullName() || !validateBirthDay()) { //Prevent the form from submitting e.preventDefault(); return } }); <form method="post" id="myForm"> <input type="text" class="form-control" id="fname" name="fname"><br/> <input type="text" class="form-control" id="bday" name="birthday"><br/> <button type="submit" name="send">submit</button> </form>Su lógica necesita modificaciones. solo para demostraciones, siga esta lógica.
Seleccione los campos del form y agregue el detector de eventos de submit . Es decir, use el método document.querySelector() para seleccionar los campos de input y el form .
Adjunte el event listener to the envío al formulario by using the método addEventListener()`
En el event listener , llame a e.preventDefault() para evitar que el form se submit button .
Desarrollar functions para validar input fields || comprobar si la entrada los campos están vacíos, de lo contrario submit el form