Odd jQuery issue when validating fields

Question

In my form, I aim to disable the submit button until all fields are selected.

Open this jsfiddle and do the following in this order:

Write something in the Description field.
Choose a category.

This will enable the submit button if the Title field is empty. How can I change the code so that the submit button remains disabled until all fields are filled.

jQuery code:

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

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

I don't get it isn't this a copy of a question http://stackoverflow.com/questions/27829051/enable-submit-button-only-when-all-fields-are-filled with already plenty of working solutions eg. http://jsfiddle.net/jsq7m8hL/2/ or if you like http://jsfiddle.net/soyn0xag/40/ — Master Slave, Jan 08 '15 at 14:59

chiapa · Accepted Answer · 2015-01-08T14:54:13.523

You must check the emptyness of the title input:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="subnewtopicform" />Title:
<input id="title" type="text" name="title" />
<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>

Fiddle here

Very nice. Thank you. – Henrik Petterson Jan 08 '15 at 14:59 — Henrik Petterson, Jan 08 '15 at 14:59

score 0 · Answer 2 · answered Jan 08 '15 at 14:55

0

that's because you don't check if the title is empty or not. Add

jQuery("input[type='text']").val() != ""

to both ifs and it should work as expected.

answered Jan 08 '15 at 14:55

A. Rama

903
8
18

Can you please update your answer adding this line of code to both if statements? – Henrik Petterson Jan 08 '15 at 14:57

Odd jQuery issue when validating fields

2 Answers2