Move location of the general error message

From review of the style with @carljbowman

Requires a bit of magic, where the Form component manually adds the "all" value. But without a major overhaul of the validation system, I don't see how else to put the general error among the other fields.
This commit is contained in:
Ray Schamp 2016-07-05 12:05:54 -04:00
parent b15b5b8614
commit d990dee755
2 changed files with 11 additions and 3 deletions

View file

@ -2,7 +2,6 @@ var classNames = require('classnames');
var Formsy = require('formsy-react'); var Formsy = require('formsy-react');
var omit = require('lodash.omit'); var omit = require('lodash.omit');
var React = require('react'); var React = require('react');
var GeneralError = require('./general-error.jsx');
var validations = require('./validations.jsx').validations; var validations = require('./validations.jsx').validations;
for (var validation in validations) { for (var validation in validations) {
@ -32,8 +31,13 @@ var Form = React.createClass({
); );
return ( return (
<Formsy.Form {... this.props} className={classes} ref="formsy" onChange={this.onChange}> <Formsy.Form {... this.props} className={classes} ref="formsy" onChange={this.onChange}>
<GeneralError name="all" value={this.state.allValues} /> {React.Children.map(this.props.children, function (child) {
{this.props.children} if (child.props.name === 'all') {
return React.cloneElement(child, {value: this.state.allValues});
} else {
return child;
}
}.bind(this))}
</Formsy.Form> </Formsy.Form>
); );
} }

View file

@ -12,6 +12,7 @@ var CharCount = require('../../components/forms/charcount.jsx');
var Checkbox = require('../../components/forms/checkbox.jsx'); var Checkbox = require('../../components/forms/checkbox.jsx');
var CheckboxGroup = require('../../components/forms/checkbox-group.jsx'); var CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
var Form = require('../../components/forms/form.jsx'); var Form = require('../../components/forms/form.jsx');
var GeneralError = require('../../components/forms/general-error.jsx');
var Input = require('../../components/forms/input.jsx'); var Input = require('../../components/forms/input.jsx');
var PhoneInput = require('../../components/forms/phone-input.jsx'); var PhoneInput = require('../../components/forms/phone-input.jsx');
var RadioGroup = require('../../components/forms/radio-group.jsx'); var RadioGroup = require('../../components/forms/radio-group.jsx');
@ -148,6 +149,7 @@ module.exports = {
onChange={this.onChangeShowPassword} onChange={this.onChangeShowPassword}
help={null} help={null}
name="showPassword" /> name="showPassword" />
<GeneralError name="all" />
<NextStepButton waiting={this.props.waiting || this.state.waiting} <NextStepButton waiting={this.props.waiting || this.state.waiting}
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} /> text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
</Form> </Form>
@ -508,6 +510,7 @@ module.exports = {
type="text" type="text"
name="address.zip" name="address.zip"
required /> required />
<GeneralError name="all" />
<NextStepButton waiting={this.props.waiting || this.state.waiting} <NextStepButton waiting={this.props.waiting || this.state.waiting}
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} /> text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
</Form> </Form>
@ -631,6 +634,7 @@ module.exports = {
equalsField: formatMessage({id: 'general.validationEmailMatch'}) equalsField: formatMessage({id: 'general.validationEmailMatch'})
}} }}
required /> required />
<GeneralError name="all" />
<NextStepButton waiting={this.props.waiting} <NextStepButton waiting={this.props.waiting}
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} /> text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
</Form> </Form>