blocks|key|2904317|text|使用下面的代码。在每次输入时，它将使用此函数validate()检查所有表单域。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2904318|jQuery("input[type='text'],+textarea").on("input",+function+()+{
++++var+isValid+=+validate();
++++if+(isValid)+{
++++++jQuery("#subnewtide").removeAttr("disabled");
++++}+else+{
++++++++jQuery("#subnewtide").attr("disabled",+"disabled");
++++}
});


function+validate()+{
++var+isValid+=+true;
++$('input,+textarea').each(function()+{
++++if+($(this).val()+===+'')
++++++++isValid+=+false;
++});
++return+isValid;
}|code-block|syntax|javascript|2904319|Fiddle|2904320|更新|BOLD|2904321|以使其验证表单是否具有id="new_tide"并修复radio按钮。|2904322|$("input[type='text'],+textarea").on("change+input",+function()+{
++validate($(this));
});

$("input:radio[name='category']").on("change",+function()+{
++++validate($(this));
});

function+validate(self)+{
++if+(self.parents("form:first").attr("id")+==+"new_tide")+{
++++var+isValid+=+true;
++++$('input[type="text"],+textarea').each(function()+{
++++++if+($(this).val()+===+'')
++++++++isValid+=+false;
++++});

++++if+(!$("input:radio[name='category']").is(':checked'))
++++++isValid+=+false;

++++if+(isValid)+{
++++++$("#subnewtide").removeAttr("disabled");
++++}+else+{
++++++$("#subnewtide").attr("disabled",+"disabled");
++++}
++}
}|2904323|2904324|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/v2rje245/2/|1|https://jsfiddle.net/v2rje245/6/^0|M|A|0|0|0|6|0|0|0|2|0|B|D|R|5|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|R|3|S|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|T|3|L|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|U|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

<p>Use this code below. On each input, it will check all the form fields by using this function <code>validate()</code>.</p>

<pre><code>jQuery("input[type='text'], textarea").on("input", function () {
    var isValid = validate();
    if (isValid) {
      jQuery("#subnewtide").removeAttr("disabled");
    } else {
        jQuery("#subnewtide").attr("disabled", "disabled");
    }
});


function validate() {
  var isValid = true;
  $('input, textarea').each(function() {
    if ($(this).val() === '')
        isValid = false;
  });
  return isValid;
}
</code></pre>

<p><a href="https://jsfiddle.net/v2rje245/2/" rel="noreferrer">Fiddle</a></p>

<p><strong>Update</strong></p>

<p>To make it validate if the form has <code>id="new_tide"</code> and fix about the <code>radio</code> button.</p>

<pre><code>$("input[type='text'], textarea").on("change input", function() {
  validate($(this));
});

$("input:radio[name='category']").on("change", function() {
    validate($(this));
});

function validate(self) {
  if (self.parents("form:first").attr("id") == "new_tide") {
    var isValid = true;
    $('input[type="text"], textarea').each(function() {
      if ($(this).val() === '')
        isValid = false;
    });

    if (!$("input:radio[name='category']").is(':checked'))
      isValid = false;

    if (isValid) {
      $("#subnewtide").removeAttr("disabled");
    } else {
      $("#subnewtide").attr("disabled", "disabled");
    }
  }
}
</code></pre>

<p><a href="https://jsfiddle.net/v2rje245/6/" rel="noreferrer">Fiddle</a></p>


blocks|key|128564|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128565|Make更改输入后生效values:|unordered-list-item|offset|length|style|BOLD|128566|128567|在每次input更改时，测试other+inputs和radio的选中状态的值，如果已输入所有inputs，则将启用submit+button：|CODE|128568|var+validateInputs+=+function+validateInputs(inputs)+{
++var+validForm+=+true;
++inputs.each(function(index)+{
++++var+input+=+$(this);
++++if+(!input.val()+%7C%7C+(input.type+===+"radio"+&&+!input.is(':checked')))+{
++++++$("#subnewtide").attr("disabled",+"disabled");
++++++validForm+=+false;
++++}
++});
++return+validForm;
}

inputs.change(function()+{
++if+(validateInputs(inputs))+{
++++$("#subnewtide").removeAttr("disabled");
++}
});|code-block|syntax|javascript|128569|演示：|128570|​|128571|var+inputs+=+$("form#myForm+input,+form#myForm+textarea");

var+validateInputs+=+function+validateInputs(inputs)+{
++var+validForm+=+true;
++inputs.each(function(index)+{
++++var+input+=+$(this);
++++if+(!input.val()+%7C%7C+(input.type+===+"radio"+&&+!input.is(':checked')))+{
++++++$("#subnewtide").attr("disabled",+"disabled");
++++++validForm+=+false;
++++}
++});
++return+validForm;
}


inputs.change(function()+{
++if+(validateInputs(inputs))+{
++++$("#subnewtide").removeAttr("disabled");
++}
});|128572|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form+action="#"+method="post"+id="myForm">

++Title:
++<input+id="titlenewtide"+type="text"+name="title"+required>
++<br>Description:
++<textarea+name="description"+id="description"></textarea>
++<br>Tag:
++<input+id="newtag"+type="text"+name="newtag"+required>
++<br>Category:
++<input+type="radio"+name="category"+value="19"+required>Animation
++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>

</form>|128573|128574|此外，它还使用表单id="myForm"，因此您可以使用它仅验证页面中的特定表单。|128575|注意:这是在Chrome__、Firefox和IE__上测试和工作的。|128576|128577|编辑：|128578|128579|Make更改将在我们键入inputs:|128580|时生效|128581|在前面的代码中，我们使用onchange事件处理程序来调用函数，因此只有当我们在给定输入外单击时(在更改之后)，才会调用它。|128582|要在用户在字段(最后一个)中输入字符时自动执行调用，我们需要使用onkeyup事件，这样就不需要在它之外单击。|128583|这是您需要更改的代码：|128584|128585|++++var+inputs+=+$("form#myForm+input,+form#myForm+textarea");

++++var+validateInputs+=+function+validateInputs(inputs)+{
++++++var+validForm+=+true;
++++++inputs.each(function(index)+{
++++++++var+input+=+$(this);
++++++++if+(!input.val()+%7C%7C+(input.type+===+"radio"+&&+!input.is(':checked')))+{
++++++++++$("#subnewtide").attr("disabled",+"disabled");
++++++++++validForm+=+false;
++++++++}
++++++});
++++++return+validForm;
++++}


++++inputs.each(function()+{
++++++var+input+=+$(this);
++++++if+(input.type+===+"radio")+{
++++++++input.change(function()+{
++++++++++if+(validateInputs(inputs))+{
++++++++++++$("#subnewtide").removeAttr("disabled");
++++++++++}
++++++++});
++++++}+else+{
++++++++input.keyup(function()+{
++++++++++if+(validateInputs(inputs))+{
++++++++++++$("#subnewtide").removeAttr("disabled");
++++++++++}
++++++++});
++++++}
++++});|128586|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form+action="#"+method="post"+id="myForm">

++Title:
++<input+id="titlenewtide"+type="text"+name="title"+required>
++<br>Description:
++<textarea+name="description"+id="description"></textarea>
++<br>Tag:
++<input+id="newtag"+type="text"+name="newtag"+required>
++<br>Category:
++<input+type="radio"+name="category"+value="19"+required>Animation
++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>

</form>|128587|128588|entityMap^0|0|0|I|0|0|3|5|K|6|R|5|1B|6|1T|6|0|0|0|3|0|0|0|0|0|9|B|0|6|6|F|7|N|2|0|0|0|0|0|J|0|0|C|8|0|W|7|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|1P|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1Q|7|@$D|1R|E|1S|F|G]]|8|@]|9|$]]|$1|H|3|-4|4|5|6|1T|7|@]|8|@]|9|$]]|$1|I|3|J|4|5|6|1U|7|@$D|1V|E|1W|F|K]|$D|1X|E|1Y|F|K]|$D|1Z|E|20|F|K]|$D|21|E|22|F|K]|$D|23|E|24|F|K]]|8|@]|9|$]]|$1|L|3|M|4|N|6|25|7|@]|8|@]|9|$O|P]]|$1|Q|3|R|4|5|6|26|7|@$D|27|E|28|F|G]]|8|@]|9|$]]|$1|S|3|T|4|5|6|29|7|@]|8|@]|9|$]]|$1|U|3|V|4|N|6|2A|7|@]|8|@]|9|$O|P]]|$1|W|3|X|4|N|6|2B|7|@]|8|@]|9|$O|P]]|$1|Y|3|T|4|5|6|2C|7|@]|8|@]|9|$]]|$1|Z|3|10|4|5|6|2D|7|@$D|2E|E|2F|F|K]]|8|@]|9|$]]|$1|11|3|12|4|5|6|2G|7|@$D|2H|E|2I|F|K]|$D|2J|E|2K|F|K]|$D|2L|E|2M|F|K]]|8|@]|9|$]]|$1|13|3|-4|4|5|6|2N|7|@]|8|@]|9|$]]|$1|14|3|15|4|5|6|2O|7|@]|8|@]|9|$]]|$1|16|3|-4|4|5|6|2P|7|@]|8|@]|9|$]]|$1|17|3|18|4|C|6|2Q|7|@$D|2R|E|2S|F|G]]|8|@]|9|$]]|$1|19|3|1A|4|5|6|2T|7|@]|8|@]|9|$]]|$1|1B|3|1C|4|5|6|2U|7|@$D|2V|E|2W|F|K]]|8|@]|9|$]]|$1|1D|3|1E|4|5|6|2X|7|@$D|2Y|E|2Z|F|K]]|8|@]|9|$]]|$1|1F|3|1G|4|5|6|30|7|@]|8|@]|9|$]]|$1|1H|3|T|4|5|6|31|7|@]|8|@]|9|$]]|$1|1I|3|1J|4|N|6|32|7|@]|8|@]|9|$O|P]]|$1|1K|3|1L|4|N|6|33|7|@]|8|@]|9|$O|P]]|$1|1M|3|T|4|5|6|34|7|@]|8|@]|9|$]]|$1|1N|3|-4|4|5|6|35|7|@]|8|@]|9|$]]]|1O|$]]

<ul>
<li><strong><em>Make the changes take effect after changing inputs values:</em></strong></li>
</ul>

<p>On each <code>input</code> change, test the values of other <code>inputs</code> and checked state of <code>radio</code>, if all <code>inputs</code> has been entered it will make the submit <code>button</code> enabled:</p>

<pre><code>var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" &amp;&amp; !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}

inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});
</code></pre>

<p><strong>Demo:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var inputs = $("form#myForm input, form#myForm textarea");

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" &amp;&amp; !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}


inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="myForm"&gt;

  Title:
  &lt;input id="titlenewtide" type="text" name="title" required&gt;
  &lt;br&gt;Description:
  &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt;
  &lt;br&gt;Tag:
  &lt;input id="newtag" type="text" name="newtag" required&gt;
  &lt;br&gt;Category:
  &lt;input type="radio" name="category" value="19" required&gt;Animation
  &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Also it uses the form <code>id="myForm"</code>, so you can use it to validate only specific forms in your pages.</p>

<p><em>Note: This is tested and working on <code>Chrome</code>, <code>Firefox</code> and <code>IE</code>.</em></p>

<hr>

<h2>EDIT:</h2>

<ul>
<li><strong><em>Make the changes take effect when we type in the inputs:</em></strong></li>
</ul>

<p>In the previous code we are using <code>onchange</code> event handler to call the function so it's only called when we click outside a given input (after change).</p>

<p>To perform the call automatically when the user enters a character in a field (the last one) we need to use the <code>onkeyup</code> event so we don't need to click outside of it.</p>

<p>This is the changed code you need :</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" &amp;&amp; !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="myForm"&gt;

  Title:
  &lt;input id="titlenewtide" type="text" name="title" required&gt;
  &lt;br&gt;Description:
  &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt;
  &lt;br&gt;Tag:
  &lt;input id="newtag" type="text" name="newtag" required&gt;
  &lt;br&gt;Category:
  &lt;input type="radio" name="category" value="19" required&gt;Animation
  &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2692373|text|下面是你怎么做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2692374|​|2692375|$(document).ready(function+()+{
++++var+$inputs+=+$("#new_tide+input:not([type=hidden]),+#new_tide+textarea");

++++$inputs.on("input+change",+function+()+{
++++++++valid+=+true;
++++++++$inputs.each(function+()+{
++++++++++++valid+*=+this.type+==+"radio"+?+this.checked+:+this.value+!=+"";
++++++++++++return+valid;
++++++++});++++
++++++++$("#subnewtide").prop("disabled",+!valid);
++++});
});|code-block|syntax|javascript|2692376|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form+action="#"+method="post"+id="new_tide">
++++Title:+<input+id="titlenewtide"+type="text"+name="title"+required>+<br>
++++Description:+<textarea+name="description"+id="description"></textarea>+<br>
++++Tag:++<input+id="newtag"+type="text"+name="newtag"+required>+<br>
++++Category:+<input+type="radio"+name="category"+value="19"+required>+Animation
++++Hidden:+<input+type="hidden">
++++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>+
</form>|2692377|2692378|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here's how you can do it:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    var $inputs = $("#new_tide input:not([type=hidden]), #new_tide textarea");

    $inputs.on("input change", function () {
        valid = true;
        $inputs.each(function () {
            valid *= this.type == "radio" ? this.checked : this.value != "";
            return valid;
        });    
        $("#subnewtide").prop("disabled", !valid);
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="new_tide"&gt;
    Title: &lt;input id="titlenewtide" type="text" name="title" required&gt; &lt;br&gt;
    Description: &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt; &lt;br&gt;
    Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; &lt;br&gt;
    Category: &lt;input type="radio" name="category" value="19" required&gt; Animation
    Hidden: &lt;input type="hidden"&gt;
    &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt; 
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2904407|text|为什么不使用jquery+validate呢？这是一个很好的插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2904408|逻辑的工作原理是，表单中的任何更改都将检查表单是否有效。同时使用errorplacement函数，它也会禁用默认的错误消息。|2904409|$().ready(function()+{
++++//+validate+signup+form+on+keyup+and+submit
++++$("#contactForm").validate({
++++++++rules:+{
++++++++++++title:+"required",
++++++++++++description:+{
++++++++++++++++required:+true
++++++++++++},
++++++++++++newtag:+{
++++++++++++++++required:+true
++++++++++++},
++++++++++++category:+{
++++++++++++++++required:+true
++++++++++++}
++++++++},
++++++++errorPlacement:+function(error,+element)+{
++++++++++++return+true;
++++++++},
++++++++submitHandler:+function()+{


++++++++}
++++});


++++$('#contactForm').change(function()+{
++++++++if+($("#contactForm").valid())+{
++++++++++++$("#subnewtide").removeAttr("disabled");
++++++++}
++++});

});|code-block|syntax|javascript|2904410|Fiddle|offset|length|2904411|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/t4hLv2au/^0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Why don't you use jquery validate . It's a good plugin . </p>

<p>The logic works like, any change in the form it will check the form is valid or not. And also using the errorplacement function it will disable the default error message also.</p>

<pre><code>$().ready(function() {
    // validate signup form on keyup and submit
    $("#contactForm").validate({
        rules: {
            title: "required",
            description: {
                required: true
            },
            newtag: {
                required: true
            },
            category: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {


        }
    });


    $('#contactForm').change(function() {
        if ($("#contactForm").valid()) {
            $("#subnewtide").removeAttr("disabled");
        }
    });

});
</code></pre>

<p><a href="https://jsfiddle.net/t4hLv2au/" rel="nofollow">Fiddle</a></p>


blocks|key|2904423|text|尝试使用.siblings()、.map()编译form元素的值，使用Array.prototype.every()返回input的Boolean表示，使用textarea值，设置form+input[type=submit]元素的disabled属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2904424|​|2904425|$("form+*[required]").on("input+change",+function(e)+{
++$(this).siblings("[type=submit]").prop("disabled"
++,+!$(this).siblings(":not([type=submit])").add(this).map(function(_,+el)+{
++++return+el.type+===+"radio"+?+el.checked+:+el.value
+++}).get().every(Boolean)
++);
});|code-block|syntax|javascript|2904426|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form+action="#"+method="post"+id="new_tide">
++++Title:+<input+id="titlenewtide"+type="text"+name="title"+required>+<br>
++++Description:+<textarea+name="description"+id="description"+required></textarea>+<br>
++++Tag:++<input+id="newtag"+type="text"+name="newtag"+required>+<br>
++++Category:+<input+type="radio"+name="category"+value="19"+required>+Animation
++++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>+
</form>|2904427|2904428|entityMap^0|4|B|G|6|O|4|Z|N|1O|5|1U|7|26|8|2I|N|38|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|Q|$]]

<p>Try utilizing <code>.siblings()</code> , <code>.map()</code> to compile values of <code>form</code> elements , <code>Array.prototype.every()</code> to return <code>Boolean</code> representation of <code>input</code> , <code>textarea</code> values , set <code>disabled</code> property of <code>form input[type=submit]</code> element </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("form *[required]").on("input change", function(e) {
  $(this).siblings("[type=submit]").prop("disabled"
  , !$(this).siblings(":not([type=submit])").add(this).map(function(_, el) {
    return el.type === "radio" ? el.checked : el.value
   }).get().every(Boolean)
  );
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;
&lt;/script&gt;
&lt;form action="#" method="post" id="new_tide"&gt;
    Title: &lt;input id="titlenewtide" type="text" name="title" required&gt; &lt;br&gt;
    Description: &lt;textarea name="description" id="description" required&gt;&lt;/textarea&gt; &lt;br&gt;
    Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; &lt;br&gt;
    Category: &lt;input type="radio" name="category" value="19" required&gt; Animation
    &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt; 
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|131298|text|Use+this+html<br>
HTML:
<br>
<pre>
<form+action="#"+method="post"+id="">
++++++++Title:+##<input+id="titlenewtide"+type="text"+name="title"+required>+
++++++++Description:+<textarea+name="description"+id="description"></textarea>
++++++++Tag:++<input+id="newtag"+type="text"+name="newtag"+required>+
++++++++Category:+<input+type="checkbox"+onclick="validate()"+name="category"+id="cate"value="19"+required+>+Animation
++++++++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>

</form>
</pre>
validation+code:<br>
//on+each+key+up+function+intiate+the+function+validate
<pre>
++++jQuery("input[type='text']").on("keyup",+function+()+{
++++++++validate();
++++});
++++jQuery("#description").on("keyup",+function+()+{
++++++++validate();
++++});

++++function+validate(){
+++++jQuery("input[type='text']").each(function(){

++++++++if+(jQuery(this).val()+!=+""+)
++++++++{
++++++++++++if((jQuery("#description").val()+!="")+&&+(jQuery("#cate").is(':checked')))
++++++++++++{

++++++++++++++++jQuery("#subnewtide").removeAttr("disabled");+
++++++++++++}
++++++++++++else+{
++++++++++++++++jQuery("#subnewtide").attr("disabled",+"disabled");
++++++++++++}
++++++++}+
++++});
++++}
++++</pre>
++++you+can+find+the+fiddle+in+:+https://jsfiddle.net/s8uv2gkp/|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|131299|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>Use this html&lt;br&gt;
HTML:
&lt;br&gt;
&lt;pre&gt;
&lt;form action="#" method="post" id=""&gt;
        Title: ##&lt;input id="titlenewtide" type="text" name="title" required&gt; 
        Description: &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt;
        Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; 
        Category: &lt;input type="checkbox" onclick="validate()" name="category" id="cate"value="19" required &gt; Animation
        &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt;

&lt;/form&gt;
&lt;/pre&gt;
validation code:&lt;br&gt;
//on each key up function intiate the function validate
&lt;pre&gt;
    jQuery("input[type='text']").on("keyup", function () {
        validate();
    });
    jQuery("#description").on("keyup", function () {
        validate();
    });

    function validate(){
     jQuery("input[type='text']").each(function(){

        if (jQuery(this).val() != "" )
        {
            if((jQuery("#description").val() !="") &amp;&amp; (jQuery("#cate").is(':checked')))
            {

                jQuery("#subnewtide").removeAttr("disabled"); 
            }
            else {
                jQuery("#subnewtide").attr("disabled", "disabled");
            }
        } 
    });
    }
    &lt;/pre&gt;
    you can find the fiddle in : https://jsfiddle.net/s8uv2gkp/
</code></pre>


blocks|key|129703|text|到目前为止，最简单的方法是依赖您已经在使用的HTML5验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|129704|如果需要所有表单控件，就必须将required添加到所有表单控件中，这可以通过使用jQuery的:input选择器并设置属性来轻松实现，如下所示|offset|length|style|CODE|129705|$(':input:not(#subnewtide)').prop('required',+true)|code-block|syntax|javascript|129706|我们将排除submit按钮，因为这不是必需的，显然，在这种情况下它并不重要。|129707|然后，我们将侦听input事件，该事件涵盖所有类型的输入，如键入、粘贴等，还将侦听覆盖单选按钮的change事件。|129708|使用form.checkValidity()告诉我们表单是否有效，并返回一个布尔值，因此我们可以直接使用它来设置submit按钮的disabled属性。|129709|所有的代码看起来就像这样，这就是你所需要的，几行非常简单的代码|129710|$(':input:not(#subnewtide)').prop('required',+true).on('input+change',+function()+{
++++$('#subnewtide').prop(+'disabled',+!this.form.checkValidity()+);
});|129711|129712|如果必须支持没有HTML5验证的旧浏览器，可以使用H5F+polyfill|129713|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/input-selector/|1|https://developer.mozilla.org/en-US/docs/Web/Events/input|2|https://developer.mozilla.org/en-US/docs/Web/Events/change|3|https://github.com/ryanseddon/H5F^0|0|F|8|1C|6|1C|6|0|0|0|0|8|5|1C|6|8|5|1|1C|6|2|0|2|K|1T|8|0|0|0|0|P|C|3|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]|$D|1H|E|1I|F|G]]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|H|3|I|5|J|7|1M|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1N|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1O|8|@$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]]|9|@$D|1T|E|1U|1|1V]|$D|1W|E|1X|1|1Y]]|A|$]]|$1|Q|3|R|5|6|7|1Z|8|@$D|20|E|21|F|G]|$D|22|E|23|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|24|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|25|8|@]|9|@]|A|$K|L]]|$1|W|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|27|8|@]|9|@$D|28|E|29|1|2A]]|A|$]]|$1|Z|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|12|13|14|A|$15|18]]|19|$5|12|13|14|A|$15|1A]]|1B|$5|12|13|14|A|$15|1C]]]]

<p>By far the easiest, would be to rely on the HTML5 validation you're already using.</p>

<p>You'd have to add <code>required</code> to all form controls if you want to require all of them, and that can easily be done by using jQuery's <a href="https://api.jquery.com/input-selector/" rel="nofollow"><code>:input</code></a> selector and setting the property, like so</p>

<pre><code>$(':input:not(#subnewtide)').prop('required', true)
</code></pre>

<p>We'll exclude the  submit button, as that doesn't have to be required, obviously, not that it would matter in this case.</p>

<p>Then we'll listen for the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/input" rel="nofollow"><code>input</code></a> event, which covers all sorts of inputs, like typing, pasting etc, and the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/change" rel="nofollow"><code>change</code></a> event as well to cover the radio button.</p>

<p>Using <code>form.checkValidity()</code> tells us if the form is valid, and returns a boolean, so we could use it directly to set the <code>disabled</code> property of the submit button.</p>

<p>All together it looks like this, and that's all you need, a few lines of really simple code</p>

<pre><code>$(':input:not(#subnewtide)').prop('required', true).on('input change', function() {
    $('#subnewtide').prop( 'disabled', !this.form.checkValidity() );
});
</code></pre>

<p><a href="https://jsfiddle.net/v2rje245/11/" rel="nofollow"><strong>FIDDLE</strong></a></p>

<p>If you have to support old browsers that don't have HTML5 validation, you can use the <a href="https://github.com/ryanseddon/H5F" rel="nofollow">H5F polyfill</a></p>


blocks|key|128679|text|我想我可以出点钱。假设尽可能少。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128680|jQuery("input,+textarea").on("keyup+click",+function+()+{+//+going+vanilla+after+easy-mode+attach
++++var+sub+=+document.getElementById('subnewtide');
++++if+(require_all(find_form(this)))+{
++++++++sub.removeAttribute('disabled');
++++++++sub.disabled+=+false;
++++}+else+{
++++++++sub.setAttribute('disabled',+'disabled');
++++++++sub.disabled+=+true;
++++}
});

function+concat(a,+b)+{+//+concating+Array-likes+produces+Array
++++var+slice+=+[].slice;+//+not+assuming+Array.prototype+access
++++return+[].concat.call(
++++++++slice.call(a,+0),
++++++++slice.call(b,+0)
++++);
}

function+find_form(e)+{+//+shim+input.form
++++if+(e)+do+{
++++++++if+(e.tagName+===+'FORM')+return+e;
++++}+while+(e+=+e.parentNode);
++++return+null;
}

function+require_all(form,+dontIgnoreHidden)+{+//+looks+at+textareas+&+inputs+(excluding+buttons)
++++var+inp+=+concat(form.getElementsByTagName('input'),+form.getElementsByTagName('textarea')),
++++++++rad+=+{},+//+not+assuming+Object.create
++++++++i,+j,
++++++++has+=+{}.hasOwnProperty;+//+not+assuming+Object.prototype+access
++++for+(i+=+0;+i+<+inp.length;+%2B%2Bi)+{
++++++++switch+((inp[i].type+%7C%7C+'').toLowerCase())+{
++++++++++++default:+//+treat+unknown+like+texts
++++++++++++case+'text':
++++++++++++++++if+(!inp[i].value)+return+false;+break;
++++++++++++case+'checkbox':
++++++++++++++++if+(!inp[i].checked)+return+false;+break;
++++++++++++case+'radio':
++++++++++++++++j+=+inp[i].getAttribute('name');
++++++++++++++++if+(!rad[j])+rad[j]+=+inp[i].checked;
++++++++++++++++break;
++++++++++++case+'hidden':
++++++++++++++++if+(dontIgnoreHidden+&&+!inp[i].value)+return+false;+break;
++++++++++++case+'button':
++++++++++++case+'submit':
++++++++++++++++break;
++++++++}
++++}
++++for+(j+in+rad)+if+(!has+%7C%7C+has.call(rad,+j))+//+not+assuming+hasOwnProperty
++++++++if+(!rad[j])+return+false;
++++return+true;
}|code-block|syntax|javascript|128681|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Thought I might chip in. Assuming as little as possible.</p>

<pre><code>jQuery("input, textarea").on("keyup click", function () { // going vanilla after easy-mode attach
    var sub = document.getElementById('subnewtide');
    if (require_all(find_form(this))) {
        sub.removeAttribute('disabled');
        sub.disabled = false;
    } else {
        sub.setAttribute('disabled', 'disabled');
        sub.disabled = true;
    }
});

function concat(a, b) { // concating Array-likes produces Array
    var slice = [].slice; // not assuming Array.prototype access
    return [].concat.call(
        slice.call(a, 0),
        slice.call(b, 0)
    );
}

function find_form(e) { // shim input.form
    if (e) do {
        if (e.tagName === 'FORM') return e;
    } while (e = e.parentNode);
    return null;
}

function require_all(form, dontIgnoreHidden) { // looks at textareas &amp; inputs (excluding buttons)
    var inp = concat(form.getElementsByTagName('input'), form.getElementsByTagName('textarea')),
        rad = {}, // not assuming Object.create
        i, j,
        has = {}.hasOwnProperty; // not assuming Object.prototype access
    for (i = 0; i &lt; inp.length; ++i) {
        switch ((inp[i].type || '').toLowerCase()) {
            default: // treat unknown like texts
            case 'text':
                if (!inp[i].value) return false; break;
            case 'checkbox':
                if (!inp[i].checked) return false; break;
            case 'radio':
                j = inp[i].getAttribute('name');
                if (!rad[j]) rad[j] = inp[i].checked;
                break;
            case 'hidden':
                if (dontIgnoreHidden &amp;&amp; !inp[i].value) return false; break;
            case 'button':
            case 'submit':
                break;
        }
    }
    for (j in rad) if (!has || has.call(rad, j)) // not assuming hasOwnProperty
        if (!rad[j]) return false;
    return true;
}
</code></pre>


blocks|key|2692532|text|我的解决方案是基于标准的JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2692533|HTML表单|offset|length|style|BOLD|2692534|<form+action="#"+method="post"+id="new_tide"+name="form1">
++++Title:+<input+onkeyup="myBtnActivator(1)"+id="titlenewtide"+name="title"+type="text"+required>+<br>
++++Description:+<textarea+onkeyup="myBtnActivator(2)"+id="description"+name="description"></textarea>+<br>
++++Tag:+<input+id="newtag"+onkeyup="myBtnActivator(3)"+name="newtag"+type="text"+required>+<br>
++++Category:+<input+name="category"+onchange="myBtnActivator(4)"+type="radio"+value="19"+required>+Animation
++++<button+id="subnewtide"+name="subnewtide"+type="submit"+value="Submit">Submit</button>
</form>|code-block|syntax|javascript|2692535|JavaScript|2692536|<script>
++++document.getElementById("subnewtide").disabled+=+true;
++++var+input1+=+false;
++++var+input2+=+false;
++++var+input3+=+false;
++++var+input4+=+false;

++++function+myBtnActivator(i)+{
++++++++switch+(i)+{
++++++++++++case+1:
++++++++++++++++input1+=+true;
++++++++++++++++if+(document.form1.title.value+==+"")
++++++++++++++++++++input1+=+false;
++++++++++++++++break;
++++++++++++case+2:
++++++++++++++++input2+=+true;
++++++++++++++++if+(document.form1.description.value+==+"")
++++++++++++++++++++input2+=+false;
++++++++++++++++break;
++++++++++++case+3:
++++++++++++++++input3+=+true;
++++++++++++++++if+(document.form1.newtag.value+==+"")
++++++++++++++++++++input3+=+false;
++++++++++++++++break;
++++++++++++case+4:
++++++++++++++++input4+=+true;
++++++++++++++++if+(document.form1.subnewtide.value+==+"")
++++++++++++++++++++input4+=+false;
++++++++++++++++break;
++++++++}
++++++++trigger();
++++}

++++function+trigger()+{
++++++++if+(input1+==+true+&&+input2+==+true+&&+input3+==+true+&&+input4+==+true)+{
++++++++++++document.getElementById("subnewtide").disabled+=+false;
++++++++}+else+{
++++++++++++document.getElementById("subnewtide").disabled+=+true;
++++++++}
++++}
</script>|2692537|entityMap^0|0|0|6|0|0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>My solution is base on standard JavaScript.</p>

<p><strong>HTML form</strong></p>

<pre><code>&lt;form action="#" method="post" id="new_tide" name="form1"&gt;
    Title: &lt;input onkeyup="myBtnActivator(1)" id="titlenewtide" name="title" type="text" required&gt; &lt;br&gt;
    Description: &lt;textarea onkeyup="myBtnActivator(2)" id="description" name="description"&gt;&lt;/textarea&gt; &lt;br&gt;
    Tag: &lt;input id="newtag" onkeyup="myBtnActivator(3)" name="newtag" type="text" required&gt; &lt;br&gt;
    Category: &lt;input name="category" onchange="myBtnActivator(4)" type="radio" value="19" required&gt; Animation
    &lt;button id="subnewtide" name="subnewtide" type="submit" value="Submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code>&lt;script&gt;
    document.getElementById("subnewtide").disabled = true;
    var input1 = false;
    var input2 = false;
    var input3 = false;
    var input4 = false;

    function myBtnActivator(i) {
        switch (i) {
            case 1:
                input1 = true;
                if (document.form1.title.value == "")
                    input1 = false;
                break;
            case 2:
                input2 = true;
                if (document.form1.description.value == "")
                    input2 = false;
                break;
            case 3:
                input3 = true;
                if (document.form1.newtag.value == "")
                    input3 = false;
                break;
            case 4:
                input4 = true;
                if (document.form1.subnewtide.value == "")
                    input4 = false;
                break;
        }
        trigger();
    }

    function trigger() {
        if (input1 == true &amp;&amp; input2 == true &amp;&amp; input3 == true &amp;&amp; input4 == true) {
            document.getElementById("subnewtide").disabled = false;
        } else {
            document.getElementById("subnewtide").disabled = true;
        }
    }
&lt;/script&gt;
</code></pre>


blocks|key|129742|text|这里有一个快速实现这一点的方法。它涉及到将change事件侦听器附加到:radio和:checkbox元素，并将input事件侦听器附加到其他元素。它们都可以使用一个通用的预定义handler，每次这些事件在适当的元素上触发时，都会计算unfilled元素的数量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|129743|​|129744|function+checkForm()+{
++++//define+and+initialize+variables
++++var+unfilled+=+0,
++++++++form+=+$(this.form);

++++//disable+submit+button+if+enabled
++++$(':submit',+form).prop('disabled',+true);

++++//count+number+of+unfilled+elements
++++$(':input',+form).each(function()+{
++++++++if(+$(this).is(':radio,:checkbox')+)+{
++++++++++++$('input[name='+%2B+this.name+%2B+']:checked').length+%7C%7C+unfilled%2B%2B;
++++++++}+else+{
++++++++++++$('[name='+%2B+this.name+%2B+']').val()+%7C%7C+unfilled%2B%2B;
++++++++}
++++});
++
++++//enable+submit+button+if+no+unfilled+element+is+found
++++unfilled+%7C%7C+$(':submit',+form).prop('disabled',+false);
}

//set+up+event+listeners+to+fire+above+handler
$(':text,textarea,select').on('input',+checkForm);
$(':radio,:checkbox').on('change',+checkForm);|code-block|syntax|javascript|129745|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form+action="#"+method="post"+id="new_tide">
++++Title:+<input+id="titlenewtide"+type="text"+name="title"+required>+<br>
++++Description:+<textarea+name="description"+id="description"></textarea>+<br>
++++Tag:++<input+id="newtag"+type="text"+name="newtag"+required>+<br>
++++Category:+<input+type="radio"+name="category"+value="19"+required>+Animation
++++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>+
</form>|129746|129747|entityMap^0|L|6|Z|6|16|9|1K|5|2H|7|3A|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|Q|$]]

<p>Here is a quick way to accomplish that. It involves attaching a <code>change</code> event listener to <code>:radio</code> and <code>:checkbox</code> elements and an <code>input</code> event listener to other elements. These can both use a common predefined <code>handler</code> that will count the number of <code>unfilled</code> element each time each of these events fires on the appropriate element.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function checkForm() {
    //define and initialize variables
    var unfilled = 0,
        form = $(this.form);

    //disable submit button if enabled
    $(':submit', form).prop('disabled', true);

    //count number of unfilled elements
    $(':input', form).each(function() {
        if( $(this).is(':radio,:checkbox') ) {
            $('input[name=' + this.name + ']:checked').length || unfilled++;
        } else {
            $('[name=' + this.name + ']').val() || unfilled++;
        }
    });
  
    //enable submit button if no unfilled element is found
    unfilled || $(':submit', form).prop('disabled', false);
}

//set up event listeners to fire above handler
$(':text,textarea,select').on('input', checkForm);
$(':radio,:checkbox').on('change', checkForm);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="new_tide"&gt;
    Title: &lt;input id="titlenewtide" type="text" name="title" required&gt; &lt;br&gt;
    Description: &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt; &lt;br&gt;
    Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; &lt;br&gt;
    Category: &lt;input type="radio" name="category" value="19" required&gt; Animation
    &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt; 
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2692539|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2692540|++++var+inputs+=+$("form#myForm+input,+form#myForm+textarea");

++++var+validateInputs+=+function+validateInputs(inputs)+{
++++++var+validForm+=+true;
++++++inputs.each(function(index)+{
++++++++var+input+=+$(this);
++++++++if+(!input.val()+%7C%7C+(input.type+===+"radio"+&&+!input.is(':checked')))+{
++++++++++$("#subnewtide").attr("disabled",+"disabled");
++++++++++validForm+=+false;
++++++++}
++++++});
++++++return+validForm;
++++}


++++inputs.each(function()+{
++++++var+input+=+$(this);
++++++if+(input.type+===+"radio")+{
++++++++input.change(function()+{
++++++++++if+(validateInputs(inputs))+{
++++++++++++$("#subnewtide").removeAttr("disabled");
++++++++++}
++++++++});
++++++}+else+{
++++++++input.keyup(function()+{
++++++++++if+(validateInputs(inputs))+{
++++++++++++$("#subnewtide").removeAttr("disabled");
++++++++++}
++++++++});
++++++}
++++});|code-block|syntax|javascript|2692541|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form+action="#"+method="post"+id="myForm">

++Title:
++<input+id="titlenewtide"+type="text"+name="title"+required>
++<br>Description:
++<textarea+name="description"+id="description"></textarea>
++<br>Tag:
++<input+id="newtag"+type="text"+name="newtag"+required>
++<br>Category:
++<input+type="radio"+name="category"+value="19"+required>Animation
++<button+type="submit"+value="Submit"+name="subnewtide"+id="subnewtide"+disabled="disabled">Submit</button>

</form>|2692542|2692543|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" &amp;&amp; !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="myForm"&gt;

  Title:
  &lt;input id="titlenewtide" type="text" name="title" required&gt;
  &lt;br&gt;Description:
  &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt;
  &lt;br&gt;Tag:
  &lt;input id="newtag" type="text" name="newtag" required&gt;
  &lt;br&gt;Category:
  &lt;input type="radio" name="category" value="19" required&gt;Animation
  &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>


<p>I have a form containing various fields. </p>

<p>See <a href="https://jsfiddle.net/v2rje245/" rel="noreferrer"><strong>jsFiddle demo</strong></a>. </p>

<p>My aim is to enable the submit button only when the user has filled in all fields. </p>

<p>So far, I'm able to force the title field to have content before submit button is enabled. How do I make it so that all other fields need to be filled too <strong>before</strong> submit button is enabled. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    jQuery("input[type='text']").on("keyup", function () {
        if (jQuery(this).val() != "" ) {
            if (jQuery("#titlenewtide").val() != '')
            {
                jQuery("#subnewtide").removeAttr("disabled");
            }
        } else {
            jQuery("#subnewtide").attr("disabled", "disabled");
        }
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="#" method="post" id="new_tide"&gt;
        Title: &lt;input id="titlenewtide" type="text" name="title" required&gt; &lt;br&gt;
        Description: &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt; &lt;br&gt;
        Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; &lt;br&gt;
        Category: &lt;input type="radio" name="category" value="19" required&gt; Animation
        &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt; 
    &lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Note that I am loading the JavaScripts in my footer.</p>


Force user to fill all fields before enabling form submit

jQuery

HTML5

我有一个包含各种字段的表单。参见。我的目标是只有在用户填写完所有字段后才启用submit按钮。到目前为止，我可以在submit按钮启用之前强制标题字段包含内容。如何在启用 submit按钮之前，使所有其他字段也需要填写。​    jQuery("input[type='text']").on("keyup", func...

问强制用户在启用表单提交之前填写所有字段
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制用户在启用表单提交之前填写所有字段EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制用户在启用表单提交之前填写所有字段
EN