Tengo un sitio creado a través de un matraz que toma la información proporcionada por el usuario y realiza alguna acción. También tengo un cargador que aparece cuando esta acción se realiza en segundo plano, el problema es que si el usuario hiciera clic en el botón "procesar" sin completar los detalles, el cargador aún se muestra.
¿Cómo hago que el cargador aparezca solo cuando el usuario ingresa todos los campos de entrada y luego hace clic en el botón "procesar"?
<form action="/result" method="post"> <tbody> <tr> <td><input type='text' name="ip" id='ipadd' required="required" placeholder="8.8.8.8" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value style="margin-bottom: 5px;" autocomplete="off"></td> </tr> </tbody> </table> <button class="btn btn-outline btn-success" style="padding-right: 15pt;"onclick="loading();">Process</button> </form> <script type="text/javascript">// <![CDATA[ function loading(){ $("#loading").show(); $("#content").hide(); } // ]]></script>Dado que su campo es required , puede ocultar o desactivar el botón si el formulario no es :invalid a través de CSS, por ejemplo
form:invalid button { pointer-events: none; opacity: .4; } <form> <input type='text' name="ip" id='ipadd' required="required" placeholder="8.8.8.8" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" /> <button>Send</button> </form>verifique que si el campo de entrada está vacío, regrese, de lo contrario, ejecute su llamada/cargador de API, o deshabilite su botón de proceso hasta que el valor sea nulo