Force user to fill all fields before enabling form submit

Question

I have a form containing various fields.

See jsFiddle demo.

My aim is to enable the submit button only when the user has filled in all fields.

So far, I'm able to force the title field to have content before submit button is enabled. How do I make it so that all other fields need to be filled too before submit button is enabled.

    jQuery("input[type='text']").on("keyup", function () {          if (jQuery(this).val() != "" ) {              if (jQuery("#titlenewtide").val() != '')              {                  jQuery("#subnewtide").removeAttr("disabled");              }          } else {              jQuery("#subnewtide").attr("disabled", "disabled");          }      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form action="#" method="post" id="new_tide">          Title: <input id="titlenewtide" type="text" name="title" required> <br>          Description: <textarea name="description" id="description"></textarea> <br>          Tag:  <input id="newtag" type="text" name="newtag" required> <br>          Category: <input type="radio" name="category" value="19" required> Animation          <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>       </form>

Note that I am loading the JavaScripts in my footer.

Answer 1

• Make the changes take effect after changing inputs values:

On each input change, test the values of other inputs and checked state of radio, if all inputs has been entered it will make the submit button enabled:

var validateInputs = function validateInputs(inputs) {   var validForm = true;   inputs.each(function(index) {     var input = $(this);     if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {       $("#subnewtide").attr("disabled", "disabled");       validForm = false;     }   });   return validForm; }  inputs.change(function() {   if (validateInputs(inputs)) {     $("#subnewtide").removeAttr("disabled");   } }); 

Demo:

var inputs = $("form#myForm input, form#myForm textarea");    var validateInputs = function validateInputs(inputs) {    var validForm = true;    inputs.each(function(index) {      var input = $(this);      if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {        $("#subnewtide").attr("disabled", "disabled");        validForm = false;      }    });    return validForm;  }      inputs.change(function() {    if (validateInputs(inputs)) {      $("#subnewtide").removeAttr("disabled");    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form action="#" method="post" id="myForm">      Title:    <input id="titlenewtide" type="text" name="title" required>    <br>Description:    <textarea name="description" id="description"></textarea>    <br>Tag:    <input id="newtag" type="text" name="newtag" required>    <br>Category:    <input type="radio" name="category" value="19" required>Animation    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>    </form>

Also it uses the form id="myForm", so you can use it to validate only specific forms in your pages.

Note: This is tested and working on Chrome, Firefox and IE.

---

EDIT:

• Make the changes take effect when we type in the inputs:

In the previous code we are using onchange event handler to call the function so it's only called when we click outside a given input (after change).

To perform the call automatically when the user enters a character in a field (the last one) we need to use the onkeyup event so we don't need to click outside of it.

This is the changed code you need :

    var inputs = $("form#myForm input, form#myForm textarea");        var validateInputs = function validateInputs(inputs) {        var validForm = true;        inputs.each(function(index) {          var input = $(this);          if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {            $("#subnewtide").attr("disabled", "disabled");            validForm = false;          }        });        return validForm;      }          inputs.each(function() {        var input = $(this);        if (input.type === "radio") {          input.change(function() {            if (validateInputs(inputs)) {              $("#subnewtide").removeAttr("disabled");            }          });        } else {          input.keyup(function() {            if (validateInputs(inputs)) {              $("#subnewtide").removeAttr("disabled");            }          });        }      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form action="#" method="post" id="myForm">      Title:    <input id="titlenewtide" type="text" name="title" required>    <br>Description:    <textarea name="description" id="description"></textarea>    <br>Tag:    <input id="newtag" type="text" name="newtag" required>    <br>Category:    <input type="radio" name="category" value="19" required>Animation    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>    </form>