Show preloader gif only when input fields are filled?

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)|(1dd)|([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>