Checking if a textbox is empty in Javascript

html, javascript

Solution

`onchange` will work only if the value of the textbox changed compared to the value it had before, so for the first time it won't work because the state didn't change.

So it is better to use `onblur` event or on submitting the form.

function checkTextField(field) {
  document.getElementById("error").innerText =
    (field.value === "") ? "Field is empty." : "Field is filled.";
}

<input type="text" onblur="checkTextField(this);" />
<p id="error"></p>

(Or old live demo.)

Problem

This is my code which was supposed to raise an `alert` message if the textbox is left empty: ``` function a(id) { var n=document.getElementById(id).value; if (n.length < 1) { window.alert("Field is blank"); return false; } } ``` The bug I'm getting is that the field is not getting verified `onChange` the first time. But when the text box is filled with some data and erased, now the `OnChange` fires, and the `alert` message is displayed. How can I fix this bug?

Original source