validateTarget

validate-target is a minimalist script to easily validate target of an HTML element especially during event delegation. Event delegation is advised for better performance, read MDN documentation for more information.

No needs to check nodeName or className properties, the function return directly a boolean when the target is correct.

The target can have multiple node name if element shares common code. The function use Element.matches to ensure selectorString match the target.

Installation

The library is available as the validate-target package name on npm and Github.

npm install validate-target --save-dev

yarn add validate-target --dev

Warning validate-target@3 is ESM.

Note Minimum supported Node.js version is 22.

CDN

You can also download it and include it with a script tag. The library will be registered as the global variable window.validateTarget.

<script src="https://cdn.jsdelivr.net/npm/validate-target@4" crossorigin></script>

Note You can browse the source of the NPM package at jsdelivr.com/package/npm/validate-target.

How it works

Basic usage

The following example returns true because the nodeName and selectorString properties match.

<a href="#" class="itemLink">Link</a>

validateTarget({
  target: document.querySelector('.itemLink'),
  selectorString: '.itemLink',
  nodeName: 'a'
});

Multiple node names

The following example returns true because button is a matched value for nodeName and selectorString.

<a href="" class="itemLink">Link</a> <button class="itemButton">Button</button>

validateTarget({
  target: document.querySelector('.itemLink'),
  selectorString: '.itemLink',
  nodeName: ['button', 'a']
});

Event delegation

The following example creates a click event listener on the nav element and intercepts click events on the itemLink element.

<nav class="nav">
  <ul>
    <li>
      <a href="" class="itemLink">Link</a>
    </li>
    <li>
      <a href="" class="itemLink">Link</a>
    </li>
    <li>
      <a href="" class="itemLink">Link</a>
    </li>
  </ul>
</nav>

document.querySelector('.nav').addEventListener('click', (e) => {
  const validateTargetLinkClick = validateTarget({
    target: e.target,
    selectorString: '.itemLink',
    nodeName: 'a'
  });

  if (validateTargetLinkClick) {
    console.log('Link is clicked.');
  }
});

Note

If the element contains other children and these should not be selectable, add the CSS property pointer-events: none on all these children.

---

Parameters

target

Type:

type target = HTMLElement;

Tells to the function the target element.

selectorString

Type:

type target = string;

Tells the function the selector string of the target element. Can be any valid CSS selector (class, id, attribute, etc.). The function uses the Element.matches function.

nodeName

Type:

type target = string | string[];

Tells the function the node names. The order of the parameters in the array does not matter.

License

validate-target is licensed under the MIT License.

Created with ♥ by @yoriiis.