View the Project on GitHub on-site/guards.js

Grouped Guards

Grouping inputs for one guard

Sometimes it doesn't make sense to guard just a single field. For example, maybe you have a form that allows a user to enter their preferred method of contact, which can be an email address or phone number. You could use the oneRequired guard to ensure the user provides at least one. Or perhaps you have some unique values that the user must distribute amongst several inputs. You could use the different guard to ensure no input has the same value. Related to the different guard is the same guard, which requires all inputs have the same value.

Enter at least an email or phone number:


example: (555) 555-1234

Distribute the colors evenly:

Custom grouped guards

Like normal guards, grouped guards can be customized with an arbitrary function. Instead of accepting a single value and element, custom grouped guard functions accept an array of values and elements, corresponding to all elements being guarded. The function will be called once when the form is guarded. The form below demonstrates a custom grouped guard.

Provide 'bar' if 'foo' is provided:

previous next