Estoy tratando de crear un formulario que dará una alerta si un campo está vacío, o si los campos no están vacíos, llevará al usuario a una nueva página (esta página existe). He intentado reemplazar 'botón' con ' input', pero todavía no hay esperanza
<div id='signupbox'> <div class="formbox"> <h1>My first contact form</h1> <p style="color:red;">Anything With a * is required</p> <br> <form name="app-form" onsubmit="return validateForm()" method="post"> <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" /> <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" /> <select name="languages" id="lang" class="feedback-input"> <option value="javascript">Select a language</option> <option value="javascript">JavaScript</option> <option value="php">PHP</option> <option value="java">Java</option> <option value="golang">Golang</option> <option value="python">Python</option> <option value="c#">C#</option> <option value="C++">C++</option> <option value="erlang">Erlang</option> </select> <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea> <button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button> </form> </div> </div> </body> <script> function validateForm() { let x = document.forms["app-form"]["Fname"].value; let y = document.forms["app-form"]["Email"].value; if ((x == "") || (y=='')) { alert("Required Fields Must be Filled Out."); return false;}} function Link(){ document.location.href = "SuccessPage.html"; } </script>Además, el atributo oninvalid sí da una alerta si el caso es para advertir al usuario mostrando una alerta:
<input name="Fname" id='Fname' type="text" class="feedback-input" oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" /> <input name="Email" id='Email' type="text" class="feedback-input" oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />Consulte HTML en Atributo de evento no válido para obtener información detallada.
Su método onClick es incorrecto. Debería ser esto:
<button type='submit' onclick="validateFormData()" >SUBMIT</button>
En su método de validación de datos de formulario, debe verificar para asegurarse de que el formulario tenga datos, si los tiene, llame a su método de enlace (). Si no es así, muestra una alerta.
en primer lugar, si desea una buena página de formulario, debe evitar que el comportamiento predeterminado sea como la renovación de la página, por lo que puede tener un proceso de validación de formulario tan bueno. Edité tu código, por favor usa esto.
<div id='signupbox'> <div class="formbox"> <h1>My first contact form</h1> <p style="color:red;">Anything With a * is required</p> <br> <form name="app-form" method="post"> <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" /> <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" /> <select name="languages" id="lang" class="feedback-input"> <option value="javascript">Select a language</option> <option value="javascript">JavaScript</option> <option value="php">PHP</option> <option value="java">Java</option> <option value="golang">Golang</option> <option value="python">Python</option> <option value="c#">C#</option> <option value="C++">C++</option> <option value="erlang">Erlang</option> </select> <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea> <button type='submit' id="button" >SUBMIT</button> </form> </div> </div> </body> <script> document.getElementById("button").addEventListener("submit", function validateForm(e) { e.preventDefault(); let x = document.getElementById("Fname").value; let y = document.getElementById("Email").value; if (!x || !y) { alert("Please fill required areas.") return } else { window.location.href="/SuccessPage.html" }} ) </script>