验证字段时出现奇怪的 jQuery 问题

Question

在我的表单中，我旨在禁用提交按钮，直到所有字段都被选中。

打开此 jsfiddle 并按此顺序执行以下操作：

在 Description 字段中写一些东西。
选择一个[=3=]。

如果 Title 字段为空，这将启用提交按钮。我怎样才能更改代码，使提交按钮保持禁用状态，直到所有字段被填充。

jQuery 代码：

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");
    }
});

Answer 1

您必须检查标题输入是否为空：

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

Answer 2

那是因为你没有检查标题是否为空。添加

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

到 if 并且它应该按预期工作。

验证字段时出现奇怪的 jQuery 问题

Odd jQuery issue when validating fields

html

forms

jquery