Disabling submit button until all fields have values

Question

I want to disable my submit button until all the fields have values.. how can I do that?

<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#register').attr("disabled", true);
        });
        </script>
    </head>
    <body>
        <form>
        Username<br />
        <input type="text" id="user_input" name="username" /><br />
        Password<br />
        <input type="text" id="pass_input" name="password" /><br />
        Confirm Password<br />
        <input type="text" id="v_pass_input" name="v_password" /><br />
        Email<br />
        <input type="text" id="email" name="email" /><br />     
        <input type="submit" id="register" value="Register" />
        </form>
        <div id="test">
        </div>
    </body>
</html>

What about attacks? using enable and disable attributes are not secure....Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty. — Elnaz
– Elnaz, Commented Sep 26, 2016 at 6:45
@Elnaz Obviously, it is not useful as a security and any user-supplied data must be treated as a potential attack. But in many cases it is a good UX. — reducing activity
– reducing activity, Commented Apr 28, 2019 at 7:14
@Elnaz I would hope that you would perform input validation on the server side, so this isn't really an attack vector, just a means of preventing premature form submissions. — Tom Lint
– Tom Lint, Commented Oct 27, 2023 at 8:18

gsamaras · Accepted Answer · 2017-08-11 21:01:12Z

106

Check out this jsfiddle.

HTML

// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />

JavaScript

(function() {
    $('form > input').keyup(function() {

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

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

The nice thing about this is that it doesn't matter how many input fields you have in your form, it will always keep the button disabled if there is at least 1 that is empty. It also checks emptiness on the .keyup() which I think makes it more convenient for usability.

edited Aug 11, 2017 at 21:01

gsamaras

73.7k50 gold badges210 silver badges330 bronze badges

answered Apr 10, 2011 at 20:44

Hristo

46.7k68 gold badges169 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Azzurrio Over a year ago

so How Can I do it with radio buttons? I've a multiple choice form

tmarthal Over a year ago

According to stackoverflow.com/questions/7637790/… it may be better to set the disabled attribute to 'disabled' and remove the disabled attribute using .removeAttr('disabled') instead of setting it to be false.

Jacek Kowalewski Over a year ago

HUGE HOLE HERE!!! If someone turns off the javascript, button is disabled. It should be set to disabled also via javascript at the beginning of the script execution.

Fernando Correia Over a year ago

Using form input instead of form > input also selects inputs inside child elements (e.g. divs).

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Over a year ago

Also use $("form input").on("keyup change",function () { } instead of just keyup as this will catch autocomplete values too...

|

user657496 · Accepted Answer · 2011-04-10 20:28:14Z

26

$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
    if(allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
    var filled = true;
    $('body input').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

JSFiddle with your code, works :)

answered Apr 10, 2011 at 20:28

user657496

1 Comment

Pathros Over a year ago

If you empty one input, the submit button keeps enabled. After the if statement I added else{$('#register').prop("disabled", true);} So now, if you empty one of the inputs, the register button is disabled again.

Sashank · Accepted Answer · 2013-09-22 07:37:28Z

9

For all solutions instead of ".keyup" ".change" should be used or else the submit button wont be disabled when someone just selects data stored in cookies for any of the text fields.

answered Sep 22, 2013 at 7:37

Sashank

1011 silver badge4 bronze badges

1 Comment

Mark W Over a year ago

this is a comment not an answer

S.L. Barth is on codidact.com · Accepted Answer · 2015-02-05 09:00:29Z

8

All variables are cached so the loop and keyup event doesn't have to create a jQuery object everytime it runs.

var $input = $('input:text'),
    $register = $('#register');    
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});

Check working example at http://jsfiddle.net/DKNhx/3/

edited Feb 5, 2015 at 9:00

S.L. Barth is on codidact.com

8,25371 gold badges55 silver badges68 bronze badges

answered Apr 10, 2011 at 21:00

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

1 Comment

riddle_me_this Over a year ago

Would this still work if the browser caches the values and prepopulates the fields? Or would a keyup event be required?

fl00r · Accepted Answer · 2011-04-10 20:33:47Z

5

DEMO: http://jsfiddle.net/kF2uK/2/

function buttonState(){
    $("input").each(function(){
        $('#register').attr('disabled', 'disabled');
        if($(this).val() == "" ) return false;
        $('#register').attr('disabled', '');
    })
}

$(function(){
    $('#register').attr('disabled', 'disabled');
    $('input').change(buttonState);
})

answered Apr 10, 2011 at 20:33

fl00r

83.7k33 gold badges222 silver badges239 bronze badges

1 Comment

Oneezy Over a year ago

i think this is the cleanest

J Grover · Accepted Answer · 2016-06-15 14:16:09Z

I refactored the chosen answer here and improved on it. The chosen answer only works assuming you have one form per page. I solved this for multiple forms on same page (in my case I have 2 modals on same page) and my solution only checks for values on required fields. My solution gracefully degrades if JavaScript is disabled and includes a slick CSS button fade transition.

See working JS fiddle example: https://jsfiddle.net/bno08c44/4/

JS

$(function(){
 function submitState(el) {

    var $form = $(el),
        $requiredInputs = $form.find('input:required'),
        $submit = $form.find('input[type="submit"]');

    $submit.attr('disabled', 'disabled');

    $requiredInputs.keyup(function () {

      $form.data('empty', 'false');

      $requiredInputs.each(function() {
        if ($(this).val() === '') {
          $form.data('empty', 'true');
        }
      });

      if ($form.data('empty') === 'true') {
        $submit.attr('disabled', 'disabled').attr('title', 'fill in all required fields');
      } else {
        $submit.removeAttr('disabled').attr('title', 'click to submit');
      }
    });
  }

  // apply to each form element individually
  submitState('#sign_up_user');
  submitState('#login_user');
});

CSS

input[type="submit"] {
  background: #5cb85c;
  color: #fff;
  transition: background 600ms;
  cursor: pointer;
}

input[type="submit"]:disabled {
  background: #555;
  cursor: not-allowed;
}

HTML

<h4>Sign Up</h4>
<form id="sign_up_user" data-empty="" action="#" method="post">
 <input type="email" name="email" placeholder="Email" required>
 <input type="password" name="password" placeholder="Password" required>
 <input type="password" name="password_confirmation" placeholder="Password Confirmation" required>
 <input type="hidden" name="secret" value="secret">
 <input type="submit" value="signup">
</form>

<h4>Login</h4>
<form id="login_user" data-empty="" action="#" method="post">
 <input type="email" name="email" placeholder="Email" required>
 <input type="password" name="password" placeholder="Password" required>
 <input type="checkbox" name="remember" value="1"> remember me
 <input type="submit" value="signup">
</form>

CSquared · Accepted Answer · 2018-11-15 17:43:46Z

1

Built upon rsplak's answer. It uses jQuery's newer .on() instead of the deprecated .bind(). In addition to input, it will also work for select and other html elements. It will also disable the submit button if one of the fields becomes blank again.

var fields = "#user_input, #pass_input, #v_pass_input, #email";

$(fields).on('change', function() {
    if (allFilled()) {
        $('#register').removeAttr('disabled');
    } else {
        $('#register').attr('disabled', 'disabled');
    }
});

function allFilled() {
    var filled = true;
    $(fields).each(function() {
        if ($(this).val() == '') {
            filled = false;
        }
    });
    return filled;
}

Demo: JSFiddle

edited Nov 15, 2018 at 17:43

answered Nov 15, 2018 at 17:29

CSquared

1553 silver badges11 bronze badges

Comments

user11006286 · Accepted Answer · 2020-03-18 20:25:40Z

1

This works well since all the inputs have to meet the condition of not null.

$(function () {
    $('#submits').attr('disabled', true);
    $('#input_5').change(function () {
        if ($('#input_1').val() != '' && $('#input_2').val() != '' && $('#input_3').val() != '' && $('#input_4').val() != '' && $('#input_5').val() != '') {
            $('#submit').attr('disabled', false);
        } else {
            $('#submit').attr('disabled', true);
        }
     });
 });

answered Mar 18, 2020 at 20:25

user11006286

1 Comment

GalanopD Over a year ago

In my case it works ok after filling in all fields but when I empty one of the fields, the #submit remains attr('disabled', false). I believe the correct behaviour would be to change to attr('disabled', true) status.

Zack Plauché · Accepted Answer · 2022-10-26 12:21:22Z

1

If you happen to be using vanilla JavaScript...

let fields = document.querySelectorAll('form > input')
let submitButton = document.querySelector('form > button')

fields = Array.from(fields) // Turn fields into an Array to access the ".every" method.

fields.forEach(field => {
  field.addEventListener('keyup', () => {
    submitButton.disabled = !fields.every(field => field.value)
  })
})

<form>
  <input type="text">
  <input type="text">
  <button type="submit" disabled>Submit</button>
</form>

answered Oct 26, 2022 at 12:21

Zack Plauché

4,3204 gold badges30 silver badges44 bronze badges

Comments

Dudo · Accepted Answer · 2016-02-16 19:57:23Z

0

Grave digging... I like a different approach:

elem = $('form')
elem.on('keyup','input', checkStatus)
elem.on('change', 'select', checkStatus)

checkStatus = (e) =>
  elems = $('form').find('input:enabled').not('input[type=hidden]').map(-> $(this).val())
  filled = $.grep(elems, (n) -> n)
  bool = elems.size() != $(filled).size()
  $('input:submit').attr('disabled', bool)

answered Feb 16, 2016 at 19:57

Dudo

4,1788 gold badges36 silver badges62 bronze badges

Comments

Karim Samir · Accepted Answer · 2022-12-15 11:05:16Z

To get all inputs that are not hidden and not directly under the form (inside child elements like divs)

    (function() {
    $('form :input:not(:hidden)').keyup(function() {

        var empty = false;
        $('form :input:not(:hidden)').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

Tyler2P · Accepted Answer · 2023-04-21 15:05:42Z

This helps to check the field time by time, whenever the input field become null it detect and disable the button again

function validate() {
  var valid = true;
  valid = checkEmpty($("#user_input")) && checkEmpty($("#pass_input")) && checkEmpty($("#v_pass_input")) && checkEmpty($("#email"));

  $("#register").attr("disabled", true);
  if (valid) {
    $("#register").attr("disabled", false);
  }
}

function checkEmpty(obj) {
  var name = $(obj).attr("name");
  $("." + name + "-validation").html("");
  $(obj).css("border", "");
  if ($(obj).val() == "") {
    $(obj).css("border", "#FF0000 1px solid");
    $("." + name + "-validation").html("Required");
    return false;
  }

  return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Username<br />
  <input type="text" id="user_input" name="username" onkeyup="validate()" /><br />
  Password
  <br />
  <input type="text" id="pass_input" name="password" onkeyup="validate()" /><br />
  Confirm Password<br />
  <input type="text" id="v_pass_input" name="v_password" onkeyup="validate()" /><br />
  Email<br />
  <input type="text" id="email" name="email" onkeyup="validate()" /><br />
  <input type="submit" id="register" value="Register" disabled/>
</form>

Collectives™ on Stack Overflow

Disabling submit button until all fields have values

12 Answers 12

HTML

JavaScript

14 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

If you happen to be using vanilla JavaScript...

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

HTML

JavaScript

14 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

If you happen to be using vanilla JavaScript...

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related