Enable submit button when the input fields are not empty and the checkbox checked

Question

Overview

I'm currently working on a project that involves a Register page. I'm using bootstrap and javascript/jquery on the client side.

The Problem

I don't want the user to submit the form until he fill each input field and check a checkbox. By default the submit button is disabled. I succeeded in activating the submit button when the fields are not empty. However my problem lies within checkbox, activating the submit button when the input fields are not empty and the checkbox checked.

This is a code snippet to better clarify my problem (eliminating unnecessary fields for this problem)

$(document).ready(function() {
  $('.register input').keyup(function() {

    var empty = false;
    $('.register input').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
  <input type="text" id="registerUsername" class="form-control" />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input type="password" id="registerPassword" class="form-control" />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

What have I tried?

Well, I came to answers on Stackoverflow and tried adjusting them to my need. Below are two solutions I tried and their flaws. Unfortunately, It didn't work as expected.

I tried checking if checkbox is checked just like I did with the input fields (I forgot the source for this one)

Here is the code I used:

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).is(":not(:checked)")){
            $('#register').attr('disabled', 'disabled');
        }
    });
});

The second approach was from this answer. This also didn't work :(

Any help is appreciated. Thanks in advance.

I have updated the solution with your requirement. Here we are checking the keyup event for the text and password input and change event of the checkbok. Hope this works for you. — Nitheesh, Mar 19 '21 at 14:45

score 2 · Accepted Answer · answered Mar 28 '21 at 12:53

For enhanced UX, let's say the user checked the checkbox before filling the input fields. In this corner case, the user has to click elsewhere for the submit button to be activated. That's why the keyup function should be present.

The following code should be sufficient

// Enabling the register button only when the register fields are not empty
$(document).ready(() => {
  $("input[type=text]").keyup(onFormUpdate);
  $("input[type=password]").keyup(onFormUpdate);
  $("input[type=checkbox]").change(onFormUpdate);
})

function onFormUpdate() {
  const registerUsername = $("#registerUsername").val();
  const registerPassword = $("#registerPassword").val();
  const acceptedTnC = $("#registerCheck").prop('checked');

  if (registerUsername && registerPassword && acceptedTnC) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" onchange="onFormUpdate()">

  <!-- username input -->
  <div class="form-outline mb-4 register">
    <input type="text" id="registerUsername" class="form-control" />
    <label class="form-label" for="registerUsername">Username</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4 register">
    <input type="password" id="registerPassword" class="form-control" />
    <label class="form-label" for="registerPassword">Password</label>
  </div>

  <!-- Checkbox -->
  <div class="form-check d-flex justify-content-center mb-4">
    <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
    <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
  </div>

  <!-- Submit button -->
  <button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

</form>

score 0 · Answer 2 · edited Mar 19 '21 at 12:53

function funCheck() {
  if (
    $("#registerCheck").is(":checked") &&
    $("#registerUsername").val().length > 0 &&
    $("#registerPassword").val().length > 0
  ) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
  <input
    type="text"
    id="registerUsername"
    class="form-control"
    onchange="funCheck()"
  />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input
    type="password"
    id="registerPassword"
    class="form-control"
    onchange="funCheck()"
  />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input
    class="form-check-input me-2"
    type="checkbox"
    value=""
    id="registerCheck"
    aria-describedby="registerCheckHelpText"
    onchange="funCheck()"
  />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button
  type="submit"
  id="register"
  disabled="disabled"
  class="btn btn-dark btn-block mb-3"
>
  Register
</button>

Your logic is correct, but this will trigger only on checkbox update. Please move this to a form level or to all the inputs. — Nitheesh, Mar 19 '21 at 12:01
@RajdipBusa Thank you for your answer. However, there is a corner case I addressed in my answer. I'm looking to hear your opinion. — user1234654, Mar 19 '21 at 14:31

Nitheesh · Answer 3 · 2021-03-19T14:43:23.387

In your edge case scenario, you have to explicitly bind the inputs with the custom function. In that function, we have to chack the values for input and checkbok. Hope this solution works for you.

$(document).ready(() => {
  $("input[type=text]").keyup(onFormUpdate);
  $("input[type=password]").keyup(onFormUpdate);
  $("input[type=checkbox]").change(onFormUpdate);
})
function onFormUpdate() {
  const userName = $("#registerUsername").val();
  const password = $("#registerPassword").val();
  const acceptedTnC = $("#registerCheck").prop("checked");

  if (userName && password && acceptedTnC) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-outline mb-4 register">
  <input type="text" id="registerUsername" class="form-control" />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input type="password" id="registerPassword" class="form-control" />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input
    class="form-check-input me-2"
    type="checkbox"
    value=""
    id="registerCheck"
    aria-describedby="registerCheckHelpText"
  />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button
  type="submit"
  id="register"
  disabled="disabled"
  class="btn btn-dark btn-block mb-3"
>
  Register
</button>

I think there is an error in your snippet. May you run it and check it up? — user1234654, Mar 19 '21 at 12:41
@NabilAlHussain oops I missed to add the jquery lib. Please check now. — Nitheesh, Mar 19 '21 at 12:46
Thank you for your answer, I appreciate it. Let's consider a corner case where the user checked the box before filling the fields. I'm looking for you to check my answer and give my your opinion on it. Thanks again (if I had enough reps I would've upvoted your answer, sorry for that). — user1234654, Mar 19 '21 at 13:25
@NabilAlHussain I have updated the solution with your requirement. Here we are checking the keyup event for the text and password input and change event of the checkbok. Hope this works for you. — Nitheesh, Mar 19 '21 at 14:44
" I'm looking for you to check my answer and give your opinion on it. ". I already solved this problem and posted an answer as I said in my previous comment. However thank you — user1234654, Mar 19 '21 at 14:57
@NabilAlHussain updated my vews on your solution. Please check that. — Nitheesh, Mar 19 '21 at 15:15

Enable submit button when the input fields are not empty and the checkbox checked

Overview

The Problem

What have I tried?

3 Answers3

The following code should be sufficient