HTML : Django Form validation and loading gif “onclick”

I have a django html form where I am taking a name and submitting it. The form works fine when input data is filled in. I want to add additional form validation before loading the gif. Please find below the code. The problem is when I add the form.valid() the gif is not loaded but validation works fine. I am trying add both form validation and gif loading at the same click event. I tried an if condition with form.valid() but that again is not loading the gif post validation.

    <script>
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }
    jQuery(function ($) {
        var threeMinutes = 60 * 3,
        display = document.querySelector('#time');
        startTimer(threeMinutes, display);
    });

    </script>

    <div class="row">
      <p></p>

    <h5>Form</h5>
    <form role="form" action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <div><span class="error-msg" id="Name"></span><div>
        <center><button type="submit" onclick="$('#loading').show();">Submit</button></center>
    </form>
    <div id="loading" style="display:none; text-align: center;">{% load staticfiles %} <img src="{% static "image/Loading_icon.gif" %}" alt="Loading"/><p></p>This may take up to three minutes.<p></p>Time Remaining: <span id="time">03:00</span> minutes!!</div></div></div>