How to Check If an Element Has Attribute Using jQuery and JavaScript?

For examples in each method described in this article, we'll be using the following HTML elements:

<input type="email" id="email" name="email" />
<input type="password" id="password" name="password" />

<input type="submit" value="Submit" />

Using hasAttribute() Function in JavaScript

JavaScript has a hasAttribute() function which can be used to test whether an attribute exists on an element or not. It returns a boolean true if a match is found and a boolean false when no match is found. For example:

// usage 1: using pure JavaScript
document.getElementById('#email').hasAttribute('name');

// usage 2: using jQuery
jQuery('#email')[0].hasAttribute('name');

// usage 3: using jQuery
jQuery('#email').get(0).hasAttribute('name');

// output: true (boolean)

Using With this Keyword:

Let's assume this keyword refers to an HTMLElement, the following would be true:

this.hasAttribute('name');

jQuery(this)[0].hasAttribute('name');
jQuery(this).get(0).hasAttribute('name');

Evaluating the Return Value From jQuery's attr() Method

const attr = $('#email').attr('name');

// attribute exists?
if (typeof attr !== 'undefined' && attr !== false) {
    // do something...
} 

Direct Evaluation of attr() Method's Return Value:

You may be wondering why we did not simply do:

if ($('#email').attr('name')) {
    // do something...
}

In most cases, that may work for you, but in order to realize the problem with this method you need to know how it works. In JavaScript the following values are considered falsy (i.e. they evaluate to false):

1. Boolean false
2. Numeric 0
3. An Empty String: "" or ''
4. null
5. undefined
6. NaN

All other values (non-falsy or truthy) evaluate to boolean true. With that information we can conclude that since the return value of jQuery's attr() is a string, a string boolean false, string 0, string null, and string NaN would be considered truthy values. However, the problem arises if the attribute is an empty string or undefined (i.e. has no value assigned) as these would all evaluate to boolean false. For example, consider the following test cases:

Attribute	if (jQuery('#email').attr('name'))
name="email"	true
name=""	false
name	false
name="0"	true
name="false"	true
name="NaN"	true
name="null"	true
name="undefined"	true

Based on above information, remember to use this technique with caution!

Another popular technique is to use the double not notation (for example !!jQuery('#email').attr('name')). It is same as directly evaluating the attr() return value with the exception that it converts the value to a boolean true or false. The return values are the same as with the test cases above.

Select Elements With Specified Attribute Only

We could simply select elements via jQuery with an attribute selector (having the syntax, [attribute="value"]). That way, only elements that actually have that attribute would be selected. We can then simply use JavaScript's length property to check if there were any elements that matched like so:

// method 1
if (jQuery('#email[name]').length > 0) {
    // do something...
}

// method 2: using is()
const elem = jQuery('#email');

if (elem.is('[name]')) {
    // do something...
}

In context of this, we could do the following:

if (jQuery(this).is('[name]')) {
    // do something...
}

Similarly, we could use the filter() method to filter out elements that do not have the specified attribute among a set of selected elements. For example:

const filtered = jQuery('input').filter('[name]');

if (filtered.length > 0) {
    // do something...
}