JS檢查是否存在值

-1

由於某種原因，我的JS沒有按照我的想法反應。提交按鈕在頁面加載時被禁用。JS檢查是否存在值

當在數據字段中輸入值時，類應該改變並且應該啓用提交按鈕。兩者都沒有發生。

這似乎是一個標準的代碼，但仍然是一個問題？

window.onload = function() { 
 
    document.getElementById('form_submit').disabled = true; 
 
} 
 

 
function validate() { 
 
    if (document.getElementById('datum').value == false) { 
 
    document.getElementById('div_datum').className = "col-md-2 input-group has-warning"; 
 
    } else { 
 
    document.getElementById('div_datum').className = "col-md-2 input-group has-success"; 
 
    document.getElementById('form_submit').disabled = false; 
 
    } 
 
}

<div class="container"> 
 
    <div class="form-group row"> 
 
    <label for="datum" class="col-md-2 form-label">Datum toolbox</label> 
 
    <div class="col-md-2 input-group has-warning" id="div_datum"> 
 
     <input type="text" class="form-control datepicker" id="datum" name="datum" onkeyup="validate()" onclick="validate()"><span class="input-group-addon"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-toggle="tooltip" title="Verplicht veld"></span></span> 
 
    </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary" id="form_submit">Verstuur</button> 
 

 
</div>

來源

2017-06-15 Muiter

我已將您的代碼塊轉換爲Stack Snippet。當我在字段中輸入時，它會啓用按鈕。你能澄清問題是什麼嗎？ –

你怎麼隱藏按鈕？您的示例中沒有任何內容隱藏或顯示按鈕。 –

這條線：

if (document.getElementById('datum').value == false)

將分支到附連的if塊的一對夫婦值（例如，如果I型0，而不僅僅是當該值空白（因爲"0" == false是奇怪的，true）。更可靠的空白值檢查是：

if (!document.getElementById('datum').value)

只有在value爲""時纔會分支。（您可能會或可能不會，如果你想清除開頭和結尾的空格要添加到.trim()value。）

另外，我不禁注意到，你的validate功能不落disabled到true，只有false。如果我輸入一些內容，然後回退它呢？您可能想要再次禁用該按鈕。所以：

function validate() { 
    if (document.getElementById('datum').value == false) { 
    document.getElementById('div_datum').className = "col-md-2 input-group has-warning"; 
    document.getElementById('form_submit').disabled = true; 
    } else { 
    document.getElementById('div_datum').className = "col-md-2 input-group has-success"; 
    document.getElementById('form_submit').disabled = false; 
    } 
}

或更多的重構：

function validate() { 
    var invalid = !document.getElementById('datum').value.trim(); 
    document.getElementById('div_datum').className = "col-md-2 input-group " + (invalid ? "has-warning" : "has-success"); 
    document.getElementById('form_submit').disabled = invalid; 
}

注意String.prototype.trim中加入ES 5.1（2011年6月），因此它不會在過時的瀏覽器IE8一樣存在，雖然它可以是多填充的;請參閱polyfill的鏈接。

來源

2017-06-15 17:08:19

JS檢查是否存在值

回答

相關問題