CODEWITHSUNDEEP
javascripthtmldom
zik
zik

Reputation: 3085

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

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.

Upvotes: 31

Views: 192571

Answers (7)

ShortFuse
ShortFuse

Reputation: 6804

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

Upvotes: 2

Dennis
Dennis

Reputation: 177

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

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

Upvotes: 0

Jonas H&#248;gh
Jonas H&#248;gh

Reputation: 10874

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!");
}

Upvotes: 48

MarShalL89PL
MarShalL89PL

Reputation: 29

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

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

Upvotes: 2

Dreendle
Dreendle

Reputation: 161

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

Upvotes: 9

Quentin
Quentin

Reputation: 943207

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.

Upvotes: 0

Mike Thomsen
Mike Thomsen

Reputation: 37506

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.

Upvotes: 0

Related Questions