enable/disable 基于输入字段的提交按钮（filled/not 已填充）

Question

我在此代码中缺少什么，如果我只想将输入提交按钮设置为 enable/disable/enable.. 只要我填写或取消填写输入文本？抱歉，我正在尽最大努力学习 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>

这是fiddle：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{
 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()）。

enable/disable 基于输入字段的提交按钮（filled/not 已填充）

enable/disable submit button based in input field (filled/not filled)

javascript

forms

jquery

form-submit

checkvalidity