JS检查值是否存在

Question

For some reason my JS is not reacting as I thought it would. The submit button is disabled at page load.

When en value is entered in the datum field the class should change and submit button should enabled. Neither is happening.

It seems an standard code but still an issue?

 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> 

Answer 1

This line:

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

will branch into the attached if block on a couple of values (for instance, if I type 0, not just when the value is blank (because "0" == false is, bizarrely, true ). A more reliable check for a blank value is:

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

That will branch in only if value is "" . (You may or may not want to add .trim() to value if you want to clear leading and trailing whitespace.)

Separately, I can't help but notice that your validate function never sets disabled to true , only false . What if I type something, then backspace over it? You probably want to disable the button again. So:

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;
  }
}

or a bit more refactoring:

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;
}

---

Note that String.prototype.trim was added in ES 5.1 (June 2011), so it doesn't exist in obsolete browsers like IE8, although it can be polyfilled; see the link for a polyfill.