仅在填写所有字段时启用提交按钮

Question

在我的表单中,我想只在选择了所有字段(和单选按钮列表)时启用表单.

到目前为止,enable当title字段包含以下内容时,我已成功完成提交按钮:

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

我的目的是只在所有内容都填满后启用提交按钮.我该怎么做呢？

这是我的工作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

在标记内使用"required"命令.

编辑:即使使用单选按钮.你只需选择一个.这是JSFiddle:http: //jsfiddle.net/soyn0xag/3/

编辑2:添加了一个新的工作JSfiddle与您的请求,以保持禁用提交按钮,直到所有字段都有内容.我使用了jquery,并且在所有可打字字段都有内容之后提交按钮是可用的,并且仍然需要单选按钮以及那个漂亮的弹出窗口:http: //jsfiddle.net/soyn0xag/9/

一旦从其中一个字段中删除内容,此选项将再次禁用该按钮.我相信这就是你想要的.

编辑3 - 最终修复修复了一个错误,让提交按钮提前显示:http: //jsfiddle.net/soyn0xag/36/

只要提交按钮包含在同一个标​​记中,您就无法在现在需要的输入字段中提交没有内容的内容.

例:

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

请注意,required不使用引号或任何其他分隔符.

Answer 2

这是给你的小提琴。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");
    }
});