Explore focusable, clickable, tabbable or active statesArticle contains
  1. What is the difference between an interactive element that can receive focus, be clicked, be active, or be tabbable?
  2. Determine if an element is clickable
  3. Determine if an element is focusable
    1. Determining if an element is a type of focusable element
    2. Determining if the element can receive focus right now
  4. Determine which element is active now
Laptop and cactus on the left side and coffee on the right side. Image by Megan Rexazin Conde from Pixabay.

Explore focusable, clickable, tabbable or active states

Determining whether an element is interactive or not can be crucial for various purposes, such as improving accessibility, enhancing user experience, testing purpose or debugging issues.

An interactive element is one that can receive focus, be clicked, be active, or be tabbable, allowing users to engage with it in some way. Let’s find out how to determine if an element is focusable or active using JavaScript.

Continue reading “Explore focusable, clickable, tabbable or active states”
Fixing missing tooltips for invalid required form controlsArticle contains
  1. Solution implementation
  2. Workable example
Using async and await with browser.runtime.onMessage in cross-browser extensionsArticle contains
  1. Understanding message passing
  2. Key points for using async/await
  3. Example implementation
  4. Conclusion
JavaScript Clipboard API with fallbackArticle contains
  1. Using the Clipboard API
  2. Limitations
  3. JavaScript Clipboard API example
Preventing multiple HTTP requests to the same endpointArticle contains
  1. Why preventing multiple requests is important
  2. Preventing multiple requests with caching, TypeScript version
    1. Example use case for TypeScript
  3. Preventing multiple requests with caching, Angular version
    1. Example of how to include interceptor in Angular
    2. Execution flow
    3. Benefits
    4. Potential issues
Creating a slug from a string in JavaScriptArticle contains
  1. Creating a slug from a string in JavaScript
  2. Code explanation
  3. Example usage
Get XPath from the element using JavaScriptArticle contains
  1. Custom function to get XPath
  2. Breakdown of how it works
  3. Additional tools
Use JavaScript to determine whether a string is a valid JSON stringArticle contains
  1. Check if provided string is a valid JSON string code
  2. Code explanation
The text "JavaScript. Is my string a valid JSON string?" on a desert.

Use JavaScript to determine whether a string is a valid JSON string

To determine whether a string is a valid JSON string in JavaScript, you can use the JSON.parse() method within a try...catch block. This approach leverages the fact that JSON.parse() throws a SyntaxError exception if the input string is not valid JSON. By catching this exception, you can accurately determine if the string represents valid JSON.

Continue reading “Use JavaScript to determine whether a string is a valid JSON string”
How to validate an email address in JavaScriptArticle contains
  1. checkValidity method from an input type="email"
  2. Validate an email address in JavaScript
  3. Avoiding a complex regular expression
  4. Final note
A hand pointing to dozens of envelopes symbolizing electronic email and the text "JavaScript validating email format"

How to validate an email address in JavaScript

To check if an email is valid using JavaScript, you can use the checkValidity() method from an <input type="email"/> field (when checking in the browser environment) and additionally check for at (@) symbol in the email address.

We are going to validate the email address format only using browser and custom validation, but not if the email actually exists.

The below code consists of two functions: isInputTypeSupported and isValidEmail. These functions are designed to validate input types and email addresses, leveraging the HTML5 form validation capabilities and custom logic for more comprehensive validation.

Continue reading “How to validate an email address in JavaScript”