Check if an HTML input element is empty or has no value entered by user

Question

Related to this question here. Can I check if an element in the DOM has a value or not? I'm trying to put it into an 'if' statement and not sure if my approach is correct. Here goes:

if (document.getElementById('customx')){
    //do something
}

Or should it be:

if (document.getElementById('customx') == ""){
    //do something
}

EDIT: By value I mean, customx is a text input box. How can I check if this field has no text entered.

Define "value". You mean text content? child elements? A `value` attribute? — Mr Lister, Jan 10 '12 at 12:42
Hi, sorry I should have been more explicit in my question. I've updated my question — zik, Jan 10 '12 at 12:43

Jonas Høgh · Accepted Answer · 2017-07-31T07:37:27.957

46

The getElementById method returns an Element object that you can use to interact with the element. If the element is not found, null is returned. In case of an input element, the value property of the object contains the string in the value attribute.

By using the fact that the && operator short circuits, and that both null and the empty string are considered "falsey" in a boolean context, we can combine the checks for element existence and presence of value data as follows:

var myInput = document.getElementById("customx");
if (myInput && myInput.value) {
  alert("My input has a value!");
}

edited Jul 31 '17 at 07:37

answered Jan 10 '12 at 12:45

Jonas Høgh

10,358
1
26
46

1

@simon Works fine on Chrome for me. Remember that you cannot access the elements of the document object until the DOMContentLoaded event has fired https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event – Jonas Høgh Jan 28 '20 at 09:46
thank you let me check out and I have problem I will going to tell you – simon Jan 30 '20 at 16:21

score 9 · Answer 2 · answered Jan 10 '12 at 14:22

9

getElementById will return false if the element was not found in the DOM.

var el = document.getElementById("customx");
if (el !== null && el.value === "")
{
  //The element was found and the value is empty.
}

answered Jan 10 '12 at 14:22

Dreendle

161
4

score 2 · Answer 3 · answered Oct 06 '14 at 13:29

2

var input = document.getElementById("customx");

if (input && input.value) {
    alert(1);
}
else {
    alert (0);
}

answered Oct 06 '14 at 13:29

MarShalL89PL

29
1

ShortFuse · Answer 4 · 2022-11-29T16:39:33.623

1

Empty is not the same as "no value".

HTMLInputElement.value is '' when you have an invalid entry. If .value is not '', then it's not empty. That's definite, but since there are times when .value === '' but not empty, we need to test. For example, in Chrome, with a number input type, if you type . or e it will be placed in the input box, but .value will not change from '' because it's invalid.

<input type=number>

We can ask the browser for more information and thankfully ValidityState is extremely well supported. Basically, if there's no value, but the browser says there's a bad input, then it's not empty.

function isInputEmpty(input) {
  return !input.value && !input.validity.badInput;
}

Edit: Credits to @osullic for find this in spec:

A control's value is its internal state. As such, it might not match the user's current input.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value

edited Nov 29 '22 at 16:39

answered Oct 17 '22 at 15:41

ShortFuse

5,970
3
36
36

This is an interesting answer, but it would be good if you could link to some reference. I'd like to be sure that I can really rely across standard browsers that `HTMLInputElement.value` doesn't change from '' unless what's been entered passes validation. – osullic Nov 29 '22 at 14:11
The spec does indeed seem to match what you say: [https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value) – osullic Nov 29 '22 at 14:49
@osullic Thanks for the reference. I discovered this because I'm trying to implement `HTMLInputElement` with Web Components and am trying to closely follow spec. There's a way to detect with `:placeholder-shown`, but you need a placeholder (even if blank) and then that can affect text selection. `badInput` seems more compatible. – ShortFuse Nov 29 '22 at 16:39

score 0 · Answer 5 · edited Sep 16 '22 at 19:36

0

var myInput = document.getElementById("customx");
if (myInput.value.length > 0) {
  //do something;
}

(.length > 0 is another way to check the input element)

edited Sep 16 '22 at 19:36

mlhDev

2,235
1
22
43

answered Sep 16 '22 at 14:31

Dennis

99
4

Thanks for the answer. I added some context to make it clear what your solution brought to the table; in the future add some context for a higher quality answer. See [how to answer](https://stackoverflow.com/help/how-to-answer) for some tips. – mlhDev Sep 16 '22 at 19:39

score 0 · Answer 6 · answered Jan 10 '12 at 12:49

0

Your first one was basically right. This, FYI, is bad. It does an equality check between a DOM node and a string:

if (document.getElementById('customx') == ""){

DOM nodes are actually their own type of JavaScript object. Thus this comparison would never work at all since it's doing an equality comparison on two distinctly different data types.

answered Jan 10 '12 at 12:49

Mike Thomsen

36,828
10
60
83

2

The first one is not correct either. It checks whether the element exists, not whether it has a value. – Jonas Høgh Jan 10 '12 at 13:03

score 0 · Answer 7 · answered Jan 10 '12 at 12:53

0

You want:

if (document.getElementById('customx').value === ""){
    //do something
}

The value property will give you a string value and you need to compare that against an empty string.

answered Jan 10 '12 at 12:53

Quentin

914,110
126
1,211
1,335

1

Keep in mind that `" "` is different to `""` but hard to spot on screen. – Quentin Jan 10 '12 at 12:58
4

Be aware that this crashes if the element does not exist. – Jonas Høgh Jan 10 '12 at 13:00

Check if an HTML input element is empty or has no value entered by user

7 Answers7

Linked