ducky/web
ducky/web/src/pages/register.jsx
Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.
1.1 --- a/src/pages/register.jsx Sun May 31 17:20:32 2015 -0400 1.2 +++ b/src/pages/register.jsx Sun May 31 17:39:19 2015 -0400 1.3 @@ -45,6 +45,9 @@ 1.4 'invalid_value': 'Oops! Those passphrases don’t match. Maybe double-check them?', 1.5 }, 1.6 1.7 + catchAllValidationOutputs: { 1.8 + }, 1.9 + 1.10 debouncedValidateForm (event) { 1.11 this._validateForm(event) 1.12 }, 1.13 @@ -188,6 +191,8 @@ 1.14 <label htmlFor='passphraseConfirmationInput'>Verify Passphrase</label> 1.15 <input id='passphraseConfirmationInput' type='password' placeholder='Just to make sure you know it.' valueLink={this.linkState('passphraseConfirmation')} disabled={this.state.active} onInput={this.validateForm} /> 1.16 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/passphrase_confirmation' outputs={this.passphraseConfirmationValidationOutputs} /> 1.17 + 1.18 + <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} notFields={['/email', '/email_confirmation', '/passphrase', '/passphrase_confirmation']} notHeaders={[]} notParams={[]} outputs={this.catchAllValidationOutputs} /> 1.19 </div> 1.20 <div className='actionbuttons'> 1.21 <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button>