Form Field Validation- JavaScript- Empty field

问题

I am new to JavaScript and I have written the code below, which is supposed to be taking the input of a form field (in that case of the lastname) and in case it is empty, it will not allow me to be redirected to next page. However, it doesnt work.. Does anybody know why or how I could fix it? Thank you in advance!

window.addEventListener("DOMContentLoaded", init, false);

function init() {
  var form = document.querySelector("form");
  form.addEventListener("submit",
    function(e) {
      validate(e);
      e.stopPropagation();
      if (invalid == true) e.preventDefault();
    },
    false);
  var invalid = false;

  function validate(e) {
    var lname = document.getElementById("lastName");
    invalid = testField(lname);
    return invalid;
  }

  function testField(field) {
    if (field.value == undefined || field.value == " ")
      invalid = true;
    else
      invalid = false;
    return invalid;
  }
}
}

回答1:

This is wrong:

if (field.value == undefined || field.value == " ")

You're comparing the value to a string containing a single space. If the field is empty, it won't match this.

There's also no need to compare with undefined, the value is always defined.

So it should be:

if (field.value == "")

You might want to trim the field first, in case they just type a bunch of spaces:

if (field.value.trim() == "")

回答2:

The main problem is making a comparison against ' ' space. That's not correct because you want to validate whether that value is empty.

So, you need to compare as follow: field.value.trim() === ""

Good, I think your code could be reformatted, for example you don't need to compare boolean values, they are already a boolean, so you can use them directly in your conditions, i.e:

if (invalid == true) //See? the invalid variable is a boolean.

So, use it as follow:

if (invalid)

Another potential code to be reformatted:

//Here you want to evaluate and assign a boolean, well you just have to assign the result of that condition.
function testField(field) {
    if (field.value == undefined || field.value == " ")
        invalid = true;
    else
        invalid = false;
    return invalid;
}

Do the following:

function testField(field) {
    return invalid = field.value == undefined || field.value == " ";
}

And finally, this code doesn't need that global variable invalid, so you can remove the invalid variable:

function(e) {
    validate(e);
    e.stopPropagation();
    if (invalid == true) e.preventDefault();
}

Access that function as follow:

function(e) {
    e.stopPropagation();
    if (validate(e)) e.preventDefault();
}

Your code after be reformatted:

window.addEventListener("DOMContentLoaded", init, false);

function init() {
  var form = document.querySelector("form");
  form.addEventListener("submit",
    function(e) {
      e.stopPropagation();
      if (validate(e)) e.preventDefault();
    },
    false);

  function validate(e) {
    var lname = document.getElementById("lastName");
    return testField(lname);
  }

  function testField(field) {
    return field.value === undefined || field.value.trim() === ""
  }
}

See?, now your code is cleaner.

There are some pieces of your code to be reformatted, but this is a good start.

来源：https://stackoverflow.com/questions/48506374/form-field-validation-javascript-empty-field