仅当所有字段不为空时才启用提交按钮 - 类型 > 文件 & 选择 & 输入

Question

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
        
<script type="text/javascript">
       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 and textarea
                    ($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) { // radio
                    valid = false;
                }
            });
            return valid;
        }

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

        validateRealTime();
</script>

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

Title:
<input type="text" name="title">

Select:
<select>
    <option value="">aaa</option>
    <option value="1">bbb</option>
    <option value="2">ccc</option>
</select>
<br/>
 <label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> 
<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="submit" id="submit" disabled="disabled" /> 

</form>

您好，我只想在所有字段都填满时启用提交按钮，特别是选择输入和文件输入这里是除选择和文件类型之外的其他类型的工作代码

下面的代码就是这样做的

1. 当文本字段为空时，应禁用提交 （禁用=“禁用”）。

2. 当在文本字段中键入内容以删除禁用的 属性。

3. 如果文本字段再次变为空（文本被删除） 提交按钮应该再次被禁用。 我的目标是仅在填写完所有内容后才启用提交按钮。我该怎么做呢？ 有任何想法吗？当用户没有在表单中选择文件或选项时，如何禁用提交按钮

<form action="" method="post" id="submitform" /> Title:
<input type="text" name="title"> Select:
<select>
  <option value="">aaa</option>
  <option value="1">bbb</option>
  <option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<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="submit" id="submit" disabled="disabled" />

</form>

Answer 1

1. 您关闭了表单标签
2. 您不能在“提交”表单中命名或标识任何内容 - 它会阻止以后通过脚本提交的任何内容，因此请习惯不这样做

您可以在字段中添加required 属性，然后表单在提交时会出错

这里是如何在文本字段和文本区域都没有内容的情况下禁用

$(function() {
  $("#submitform").on("input",function() {
    const anythingEmpty = $(":input").val().trim() === "";
    $("#subBut").prop("disabled",anythingEmpty);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="submitform"> Title:
  <input type="text" name="title"> Select:
  <select>
    <option value="">aaa</option>
    <option value="1">bbb</option>
    <option value="2">ccc</option>
  </select>
  <br/>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
  <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" id="subBut" value="Submit Topic" class="button-primary" disabled="disabled" />
</form>

纯 JS

window.addEventListener("load",function() {
  document.getElementById("submitform").addEventListener("input",function() {
    const desEmpty = this.querySelector("[name=description]").value.trim() === "";
    const txtEmpty = this.querySelector("[name=title]").value.trim() === "";
    document.getElementById("subBut").disabled = desEmpty || txtEmpty
  })
})

Answer 2

如果你在每个输入上添加 id，你可以使用下一个 js vanilla 代码，并在表单上添加 onchange 函数。

<head>
<script>

    function validate(){
        var submit = document.getElementById('submit');
        var title = document.getElementById('title').value === ""? false: true; 
        var file = document.getElementById("myfile").value === ""? false: true;
        var val19 = document.getElementById("in-category-19").checked;
        var val20 = document.getElementById("in-category-20").checked;
        var checked = val19 || val20;
        
        var textArea = document.getElementById("textarea").value===""?false: true;
        var filled =(checked && title&& textArea && file);
        filled? submit.disabled=false: submit.disabled=true;
    }
    
</script>
</head>

  <body><form onchange="validate();" action="" method="post" id="submitform" /> Title:
<input type="text" id="title" name="title"> Select:
<select>
  <option value="">aaa</option>
  <option value="1">bbb</option>
  <option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea id ="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="submit" id="submit" disabled=true />

</form>
</body>