DEV Community

Aaron Gustafson
Aaron Gustafson

Posted on • Originally published at aaron-gustafson.com on

A Web Component for Conditional Dependent Fields

A few weeks back I released a web component to enable you to add requirement rules to checkbox groups. Continuing in the form utility space, I’ve created a new web component that allows you to make fields required based on the values of other fields: form-required-if.

The form-required-if web component, which is based on a jQuery plugin I’d written in 2012, looks like this:

<form-required-if
  conditions="email=*"
  >
  <label>
    Required if there’s an email value
    <input name="depends-on-email">
  </label>
</form-required-if>
Enter fullscreen mode Exit fullscreen mode

You wrap any field (and its label) in the component and then declare the conditions under which it should be required in the conditions attribute.

# Defining the requirement conditions

Each condition is a key/value pair where the key aligns to the name of the field you need to observe and the value is the value that could trigger the dependency. If any value should trigger the dependency, you use an asterisk () as the value. In the example above, the field will become required when any value is assigned to the field matching [name="email"].

This conditions attribute can be populated with as many or as few dependencies as make sense for your use case. Multiple conditions are separated by double vertical pipes (|| a.k.a. or) as in this example:

<form-required-if 
  conditions="email=*||test=3"
  >
  <label>
    Depends on email or test field
    <input name="depends-on-email-or-test">
  </label>
</form-required-if>
Enter fullscreen mode Exit fullscreen mode

Here the field depends on one of the following conditions being true:

  1. the field matching [name="email"] has a value, or
  2. the field matching [name="test"] has a value of “3”

If the field you reference doesn’t exist, no errors will be thrown, it will just quietly exit.

# Visually indicating a field is required

If you typically use an asterisk or similar to indicate a field is required, this web component can support that through one or both of the following attributes:

  • indicator - This attribute is where you define the indicator itself. It could be something as simple as a string (e.g., ), or even full-blown HTML.
  • indicator-placement - As you can probably guess, this attribute is used to set the position of the indicator. If you want it at the start of the label text, you give it the value “before.” If you want it after the text, you use “after” or don’t use the attribute at all. Indicators will be placed after the label text by default.

Here’s an example with a custom indicator that is HTML:

<form-required-if
  conditions="email=*"
  indicator="<b></b>"
  >
  <label>
    Depends on email
    <input name="dep2">
  </label>
</form-required-if>
Enter fullscreen mode Exit fullscreen mode

If you don’t include markup in your indicator, it will be automatically wrapped in span when injected into the DOM. The hidden and aria-hidden attributes are used to toggle its visibility, relative to the requirement state of the field.

# Demo

I put together a relatively simple demo of the web component over on GitHub:

# Grab It

You can view the entire project (and suggest enhancements) over on the form-required-if component’s Github repo.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay