启用/禁用基于输入字段的提交按钮（填充/未填充）

Question

我在这段代码中缺少什么，如果我只是想要输入提交按钮来启用/禁用/启用..只要我填充或不填充输入文本？ 对不起，我正在尽我所能学习JavaScript ...谁能帮我修复此代码？

<form name="myform" method="post"> 
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value=""/> 
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/> 
</form> 

<script> 
var sbmtBtn = document.getElementById("SubmitButton"); 
sbmtBtn.disabled = true; 

function checkFormsValidity(){ 
var myforms = document.forms["myform"]; 
    if (myforms.checkValidity()) { 
     sbmtBtn.disabled = false; 
    } else { 
     sbmtBtn.disabled = true; 
    } 
} 
</script> 

这是小提琴：https://jsfiddle.net/1zfm6uck/

我失去了声明的onLoad模式或类似这样的东西吗？ 谢谢！

Answer 1

function checkFormsValidity(){ 

必须改变：

checkFormsValidity = function(){ 

个人而言，我不会查的有效性那样，而是使你的代码工作没有错误的条件，这将做到这一点。

编辑：另外添加required="required"到输入。

Answer 2

其实 - 如果它不是一个jsfiddle例如您的代码将工作的伟大：

var sbmtBtn = document.getElementById("SubmitButton"); 
 
sbmtBtn.disabled = true; 
 

 
function checkFormsValidity(){ 
 
    var myforms = document.forms["myform"]; 
 
    if (myforms.checkValidity()) { 
 
    sbmtBtn.disabled = false; 
 
    } else { 
 
    sbmtBtn.disabled = true; 
 
    } 
 
}

input[type='submit']:disabled{ 
 
\t color:red; 
 
}

<form name="myform" method="post"> 
 
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required="required" /> 
 
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/> 
 
</form>

问题是放的jsfiddle JavaScript代码clousure里面，所以checkFormsValidity功能在您的input范围内不可用。

我向您的input添加了一个required="required"，以确保它是必填字段（这将影响您的表单的checkValidity()）。