Exclusion Constraint Object Value Display

[justrhysism]

Problem

Currently we're able to display the selected value in the message, as per the example from the docs:

var constraints = {
  subdomain: {
    exclusion: {
      within: {jp: "Japan", "ch": "China"},
      message: "^We don't support %{value} right now, sorry"
    }
  }
};

validate({subdomain: "jp"}, constraints);
// => {"subdomain": ["We don't support jp right now, sorry"]}

validate({subdomain: "com"}, constraints);
// => undefined

I'm not exactly sure what the purpose of the key/value pair is. I can't seem to find where the Value assigned is used.

Typically, the label presented to the user isn't the value stored, nor the value which is validated. Using a similar example, a dropdown for "country" could look something like:

<select name="country">
  <option value="au">Australia</option>
  <option value="gb">Great Britain</option>
  <option value="nz">New Zealand</option>
  <option value="us">United States</option>
</select>

So when attempting to validate the value, the logical way to fetch the value would be something along the lines of myForm.country.value which would return any of au, gb, nz, us. Using the current validation API, this would mean the constraints would need to look like:

var constraints = {
  country: {
    exclusion: {
      within: {au: "Australia", nz: "New Zealand"},
      message: "^We don't support %{value} right now, sorry"
    }
  }
};

Which, with a selection of "Australia" would result in a message reading "We don't support au right now, sorry". (As opposed to the more user-friendly "We don't support Australia right now, sorry").

Solution?

It doesn't look too difficult to add a %{label}, so the message could be provided as
"^We don't support %{label} right now, sorry", resulting in "We don't support Australia right now, sorry".

(I'm open to it not being %{label}, however it doesn't make sense for it to be key, as it's not the key in the object, the value is. Such confusion! 😕 )

[ansman]

Fixed, thanks!