Ahora estoy construyendo una página de registro y he etiquetado las entradas de nombre de usuario y contraseña según sea necesario. Código simple como:
Username <input id="username" type="text" required/> Password <input id="username" type="password" required/> <button id="register">Register</button> <div id="registerOutput></div>Cuando solo ejecuto ese código con HTML puro en localhost, el "requerido" funcionaría correctamente. Pero una vez que incluyo un archivo register.js que hice para obtener los datos y uso AJAX para enviar datos a register.php, el atributo requerido parece no funcionar. En register.js, código simple como:
$(document).ready(function(){ $("#register").on("click", function(){ var username = $("#username").val(); var password = $("#password").val(); var userData = "username=" + username + "&password=" + password; $.ajax({ method: "post", url: "register.php?", data: userData, success: function(backData){ $("#registerOutput").html(backData); } }); }); });¿Alguien puede decirme la razón por la cual jQuery anularía la funcionalidad requerida? ¿Cómo superarlo o si debe anularse, cómo debo hacer lo mismo en mi código jQuery?
Es posible que desee rediseñar un poco su código. Hay una manera de seguir la conveniencia de HTML y, sin embargo, usar todo el poder de AJAX.
Edité tu ejemplo en jsfiddle: https://jsfiddle.net/myezf63b/
Así que aquí está el HTML modificado:
<form id="form"> Username <input id="username" type="text" required/> Password <input id="username" type="password" required/> <button type="submit" id="register">Register</button> </form> <div id="registerOutput"> </div> Básicamente, agregué type="submit" al botón y lo envolví dentro del formulario.
y este es el código jQuery modificado:
e.preventDefault() que evita que el sitio web se redirija (recargue la página) y, como evento, usé el submit que sigue este patrón.
$(document).ready(function(){ $("#form").on("submit", function(e){ e.preventDefault() var username = $("#username").val(); var password = $("#password").val(); var userData = "username=" + username + "&password=" + password; console.log('test') $.ajax({ method: "post", url: "register.php?", data: userData, success: function(backData){ $("#registerOutput").html(backData); } }); }); });