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    style="padding-right: 15pt;"onclick="loading();">Process</button>
   </form>


  <script type="text/javascript">// <![CDATA[
        function loading(){
            $("#loading").show();
            $("#content").hide();
        }
// ]]></script>

CodePudding user response：

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>

CodePudding user response：

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