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,

Answer 1

Use this code below. On each input, it will check all the form fields by using this function validate().

jQuery("input[type='text'], textarea").on("input", function () {
    var isValid = validate();
    if (isValid) {
      jQuery("#subnewtide").removeAttr("disabled");
    } else {
        jQuery("#subnewtide").attr("disabled", "disabled");
    }
});


function validate() {
  var isValid = true;
  $('input, textarea').each(function() {
    if ($(this).val() === '')
        isValid = false;
  });
  return isValid;
}

Fiddle

Update

To make it validate if the form has id="new_tide" and fix about the radio button.

$("input[type='text'], textarea").on("change input", function() {
  validate($(this));
});

$("input:radio[name='category']").on("change", function() {
    validate($(this));
});

function validate(self) {
  if (self.parents("form:first").attr("id") == "new_tide") {
    var isValid = true;
    $('input[type="text"], textarea').each(function() {
      if ($(this).val() === '')
        isValid = false;
    });

    if (!$("input:radio[name='category']").is(':checked'))
      isValid = false;

    if (isValid) {
      $("#subnewtide").removeAttr("disabled");
    } else {
      $("#subnewtide").attr("disabled", "disabled");
    }
  }
}

Fiddle

Answer 2

Here is a quick way to accomplish that. It involves attaching a change event listener to :radio and :checkbox elements and an input event listener to other elements. These can both use a common predefined handler that will count the number of unfilled element each time each of these events fires on the appropriate element.

function checkForm() {
    //define and initialize variables
    var unfilled = 0,
        form = $(this.form);

    //disable submit button if enabled
    $(':submit', form).prop('disabled', true);

    //count number of unfilled elements
    $(':input', form).each(function() {
        if( $(this).is(':radio,:checkbox') ) {
            $('input[name=' + this.name + ']:checked').length || unfilled++;
        } else {
            $('[name=' + this.name + ']').val() || unfilled++;
        }
    });
  
    //enable submit button if no unfilled element is found
    unfilled || $(':submit', form).prop('disabled', false);
}

//set up event listeners to fire above handler
$(':text,textarea,select').on('input', checkForm);
$(':radio,:checkbox').on('change', checkForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

Answer 3

There's actually a pretty easy approach. I'm using native JavaScript, but I think it is applicable in jQuery as well:

var form = document.getElementById("new_tide");
form.onchange = function onChange() {
    var enable = true;
    var inputs = form.getElementsByTagName("input");
    var textareas = form.getElementsByTagName("textarea");

    for (var i in inputs) {
        enable = enable && inputs[i].value != "";
    }

    for (var i in textareas) {
        enable = enable && textareas[i].value != "";
    }

    enable = enable && textarea.value != "";
    document.getElementById("subnewtide").disabled = !enable;
}

The change event on form is always called, when any input or textarea element was changed (click in element, type, click somewhere else or lose focus).

Edit:
Regarding hidden fields, you can exclude them by surrounding the enable calculation with an if-condition:

if (!inputs[i].hidden) {
    enable = enable && inputs[i].value != "";
}

Note:
This will work in any browser (even Internet Explorer 5.5). Check on MDN:

for ..in Loop
element.getElementsByTagName()
document.getElementById()

Answer 4

Here's how you can do it:

$(document).ready(function () {
    var $inputs = $("#new_tide input:not([type=hidden]), #new_tide textarea");

    $inputs.on("input change", function () {
        valid = true;
        $inputs.each(function () {
            valid *= this.type == "radio" ? this.checked : this.value != "";
            return valid;
        });    
        $("#subnewtide").prop("disabled", !valid);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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
    Hidden: <input type="hidden">
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

Answer 5

Try utilizing .siblings() , .map() to compile values of form elements , Array.prototype.every() to return Boolean representation of input , textarea values , set disabled property of form input[type=submit] element

$("form *[required]").on("input change", function(e) {
  $(this).siblings("[type=submit]").prop("disabled"
  , !$(this).siblings(":not([type=submit])").add(this).map(function(_, el) {
    return el.type === "radio" ? el.checked : el.value
   }).get().every(Boolean)
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" required></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>

Answer 6

Why don't you use jquery validate . It's a good plugin .

The logic works like, any change in the form it will check the form is valid or not. And also using the errorplacement function it will disable the default error message also.

$().ready(function() {
    // validate signup form on keyup and submit
    $("#contactForm").validate({
        rules: {
            title: "required",
            description: {
                required: true
            },
            newtag: {
                required: true
            },
            category: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {


        }
    });


    $('#contactForm').change(function() {
        if ($("#contactForm").valid()) {
            $("#subnewtide").removeAttr("disabled");
        }
    });

});

Fiddle