啓用/禁用基於輸入字段的提交按鈕（填充/未填充）

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()）。