Enable submit button only when all fields are filled

Question

In my form, I want to enable form only when all fields (and radio button list) has been selected.

So far, I have successfully made the submit button enable when the title field has content with:

onkeyup="if(this.textLength != 0) {subnewtopic.disabled = false} else {subnewtopic.disabled = true}"

My aim is to enable submit button only once everything has been filled. How do I do this?

Here is my full code with working jsfiddle:

            <form action="" method="post" id="subnewtopicform" />

                Title:
                <input type="text" name="title" onkeyup="if(this.textLength != 0) {subnewtopic.disabled = false} else {subnewtopic.disabled = true}">

<br/>

                Description:
                <textarea name="description"></textarea> 

<br/>
                Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">

<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>

<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>

    </ul>

                <input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" /> 

            </form>

Answer 1

Here is a fiddle for you. http://jsfiddle.net/soyn0xag/6/

$("input[type='text'], textarea").on("keyup", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

$("input[name='category']").on("change", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

Answer 2

use the "required" command inside the tag.

edit: Even with the radio buttons. you'd only have to select one. Here is the JSFiddle: http://jsfiddle.net/soyn0xag/3/

edit 2: Added a new working JSfiddle with your request to keep the submit button disabled until all fields have content. I used jquery, and the submit button is available after all typable fields have content, and the radio buttons are still required with that nice pop up: http://jsfiddle.net/soyn0xag/9/

this option DISABLES the button again once you take away the content from one of the fields. I believe this is what you want.

edit 3 - Final Fix Fixed a bug that let the submit button show up early: http://jsfiddle.net/soyn0xag/36/

As long as the and the submit button are wrapped in the same tag, you will not be able to submit without content in the now required input fields.

Example:

<input type="radio" id="in-category-19" name="category" value="19" required> Animation</label>

Note that required does not use quotes or any other delimiter.

Answer 3

yet another solution

required = function(fields) {
  var valid = true;
  fields.each(function () { // iterate all
    var $this = $(this);
    if (($this.is(':checkbox') && !$this.is(":checked")) || // checkbox
       (($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text 
       ($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) {
            valid = false;
        }
    });
    return valid;
}

validateRealTime = function () {
    var fields = $("form :input:not(:hidden)"); // select required
    fields.on('keyup change keypress blur', function () {
        if (required(fields)) {
            {subnewtopic.disabled = false} // action if all valid
        } else {
            {subnewtopic.disabled = true} // action if not valid
        }
    });
}

http://jsfiddle.net/jsq7m8hL/2/