Tengo un botón de envío (bootstrap) donde envío algunos datos de los campos de entrada a mi consulta de PHP. He agregado a este botón de envío un control giratorio de carga después de que el usuario haya hecho clic en el botón. Desde que agregué la identificación de la ruleta al botón, el atributo HTML para "requerido" ya no funciona. Ya no indica al usuario que falta información.
Ejemplo:
$(document).ready(function() { $("#load").click(function() { // disable button $(this).prop("disabled", true); // add spinner to button $(this).html( `<i class="spinner-border spinner-border-sm mb-1"></i> Loading` ); $("#save").submit(); }); }); <form method="post" action="" id="save"> <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input> <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button> </form>¿Quizás debería escuchar el evento de envío en lugar de hacer clic?
$(document).ready(function() { $("#save").submit(function(e) { // disable button $('#load').prop("disabled", true); // add spinner to button $('#load').html( `<i class="spinner-border spinner-border-sm mb-1"></i> Loading` ); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="" id="save"> <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input> <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button> </form>