foxhound87 / mobx-react-form

Reactive MobX Form State Management
https://foxhound87.github.io/mobx-react-form
MIT License
1.09k stars 129 forks source link

Custom DVR Rules with names starting with `/^(required_|same|different)/` can potentially break the form init #583

Open pdfowler opened 3 years ago

pdfowler commented 3 years ago

tl;dr: Be careful when naming any custom DVR validation rules, avoid starting rule name with "required", "same" or "different"

We're in the process of upgrading from v1.35.1 to 2.0.9, in preparation for mobx 6 and the 3.0 upgrade. While doing this, I ran into a very strange issue where the form was crashing when it tried to select a date. That is, the code was effectively running:

form.$('Tue Jul 13 2021 10:45:32 GMT-0700 (Pacific Daylight Time)')

... which obviously caused a problem.

I traced the problem back to the makeLabels method in DVR.js, which checks if the rule being parsed starts with required_, same or different, and if so, attempts to parse it as one of those rules and takes the argument after the comma as a field name.

In our case, we defined our rule as:

const rules = {
      same_or_after_moment: {
        validateRule: (value, arg) => {
          debugger;
          return moment(value).isSameOrAfter(arg);
        },
        message: 'The end date/time must be after the start date/time',
      },
}

and configured the rule as rule = \`required|date|moment_same_or_after:${newVal}\`;

Since our implementation uses a specific value (ie: newVal in example) instead of a field name, the form crashed