django - JQuery disable submit button till form is completely filled

Question

I am trying to implement a jquery function to diable submit button till all values are filled please help as I seem not to find a solution to it..Where am I going wrong?

Here is the html:

<form action="{% url 'register' %}" id="registerform" class="sign-up-form" method="POST">
                {% csrf_token %}
                <h2 class="title">Sign up</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user"></i>
                            <input type="text" name="firstname" placeholder="First name"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user"></i>
                            <input type="text" name="secondname" placeholder="Second name"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field userfield">
                            <i class="fas fa-user"></i>
                            <input type="text" id="id_username" name="username" placeholder="Username"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field emailfield">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="id_email" name="email" placeholder="Email"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-lock-open"></i>
                            <input type="number" name="idno" placeholder="ID/Passport Number"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user-ninja"></i>
                            <input type="text" name="nationality" placeholder="Nationality"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field passfield">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="password" onkeyup="checkPasswordStrength();" name="password"
                                   placeholder="Password"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field cpassfield">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="cpassword" onkeyup="cpassword();"
                                   placeholder="Confirm Password"/>
                        </div>
                    </div>
                </div>
                <input type="submit" id="register" class="btn" style="background-color: #5995fd;!important;"
                       value="Sign up" disabled/>
                <p class="copy-text">&copy;2020. All Rights Reserved</p>
                <h3 class="copy-text"> Kenya Airways</h3>
            </form>

and the javascript:

<script>
    //disable submit button
    (function () {

        $('#registerform > input').keyup(function () {

            var empty = false;
            $('#registerform> input').each(function () {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {
                $('#register').attr('disabled', 'disabled');
            } else {
                $('#register').removeAttr('disabled');
            }
        });
    })()
</script>

Please help me solve the above as the button is still disabled even after all forms are submitted.

question from:https://stackoverflow.com/questions/65651233/jquery-disable-submit-button-till-form-is-completely-filled

Answer 1

$('#registerform> input') selects only looks at the immediate children(input) of registerform.

Error

 $('#registerform> input')

Fix

 $('#registerform input')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="{% url 'register' %}" id="registerform" class="sign-up-form" method="POST">
    <h2 class="title">Sign up</h2>
    <div class="row">
        <div class="col-md-6">
            <div class="input-field">
                <i class="fas fa-user"></i>
                <input type="text" name="firstname" placeholder="First name" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field">
                <i class="fas fa-user"></i>
                <input type="text" name="secondname" placeholder="Second name" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field userfield">
                <i class="fas fa-user"></i>
                <input type="text" id="id_username" name="username" placeholder="Username" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field emailfield">
                <i class="fas fa-envelope"></i>
                <input type="email" id="id_email" name="email" placeholder="Email" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field">
                <i class="fas fa-lock-open"></i>
                <input type="number" name="idno" placeholder="ID/Passport Number" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field">
                <i class="fas fa-user-ninja"></i>
                <input type="text" name="nationality" placeholder="Nationality" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field passfield">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" name="password" placeholder="Password" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-field cpassfield">
                <i class="fas fa-lock"></i>
                <input type="password" id="cpassword" placeholder="Confirm Password" />
            </div>
        </div>
    </div>
    <input type="submit" id="register" class="btn" style="background-color: #5995fd;!important;" value="Sign up"
        disabled />
    <p class="copy-text">&copy;2020. All Rights Reserved</p>
    <h3 class="copy-text"> Kenya Airways</h3>
</form>

<script>
    //disable submit button
    (function () {

        $('#registerform input').keyup(function () {

            var empty = false;
            $('#registerform input').each(function () {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {
                $('#register').attr('disabled', 'disabled');
            } else {
                $('#register').removeAttr('disabled');
            }
        });
    })()
</script>