I have a site built via flask that takes the information provided by the user and performs some action . I also have a loader that shows up when this action is done in the background, the trouble is , if the user were to click on the button "process" without filling the details , the loader is still shown .
How do i make the loader appear only when all the input fields are entered by the user and then clicks on "process" button
<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>
Since your field is required you could hide or disable the button if the form is :invalid via CSS, e.g.
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>do a check that if input field is empty then return else execute your api call/loader, or disable your process button till value is null