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

Question

在我的表单中，我只想在所有字段（和单选按钮列表）都被选中时启用表单。

到目前为止，当 title 字段的内容为：

时，我已成功创建提交按钮 enable

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" 命令。

edit: 即使有单选按钮。你只需要select一个。这是 JSFiddle： http://jsfiddle.net/soyn0xag/3/

edit 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>

请注意，要求不使用引号或任何其他分隔符。

Answer 2

这里有一个 fiddle 给你。 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 3

有几种不同的方法可以解决这个问题（正如您可能在上面看到的那样）。

这可能不是最有效的方法，但您可以在他们每次单击或按键时检查是否有任何文本字段为空以及是否有任何单选按钮已填充。如果一个单选按钮被填充，而 none 个文本字段为空，您可以继续并启用该按钮。否则，您可以禁用它（或保持禁用状态）。

让我们逐行分析：

function check() { // Define a function that we can call our event listeners with
    // Get our inputs and textareas
    var inputs = document.getElementsByTagName("input");
    var textareas = document.getElementsByTagName("textarea");
    var filled = true; // We'll assume that all of the fields are full unless proven otherwise
    var oneChecked = false; // We can use this to keep track of the radio buttons (by assuming at first that none are checked)

    for (var i = 0; i < inputs.length; i++) { // Loop through all of the inputs first
        if (inputs[i].type === "text" && !inputs[i].value) { // If the input is a text field, check whether it is empty; if so, set filled to false
            filled = false;
        }

        if (inputs[i].type === "radio" && inputs[i].checked) { // If the input is a radio button, see if it is filled in; because we only need one radio button to be filled in, that's all we need to know
            oneChecked = true;
        }

    }

    if (!oneChecked) { // Check outside of the loop if any of our radio buttons were selected and, if not, set filled to false
        filled = false;
    }

    for (var j = 0; j < textareas.length; j++) { // Now loop through all of the text areas; if any aren't filled in, set filled to false
        if (!textareas[j].value) {
            filled = false;
        }
    }

    if (filled) { // Check whether any of the fields are empty (or, in the radio button's case, if one is selected, and enable/disable the button accordingly
        document.getElementById("subnewtopic").disabled = false;
    } else {
        document.getElementById("subnewtopic").disabled = true;
    }
}

// Add event listeners to check for keypresses and clicks
window.addEventListener("keyup", check);
window.addEventListener("click", check);

Demo

Answer 4

另一种解决方案

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/

Answer 5

这个问题我还是要回答的： Live Demo Link

$(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });

   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

 $(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });
   
   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="required">
    <option value="" selected disabled>selected a value</option>
    <option>Car</option>
    <option>Buss</option>
    <option>Train</option>
</select>
 
<select class="required">
    <option value="" selected  disabled>selected a option</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>
<br /> <br /> 
<input type="text" class="required" placeholder="Full Name">

<input type="number" class="required" placeholder="Age">
<br /> <br /> 
<button type="button" class="toggle-disabled" disabled>Submit</button>

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

Enable submit button only when all fields are filled

html

forms

jquery