105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import Formsy from 'formsy-react';
|
|
|
|
import MyInput from './../components/Input';
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const validators = {
|
|
time: {
|
|
regexp: /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,
|
|
message: 'Not valid time'
|
|
},
|
|
decimal: {
|
|
regexp: /(^\d*\.?\d*[0-9]+\d*$)|(^[0-9]+\d*\.\d*$)/,
|
|
message: 'Please type decimal value'
|
|
},
|
|
binary: {
|
|
regexp: /^([0-1])*$/,
|
|
message: '10101000'
|
|
}
|
|
};
|
|
|
|
Formsy.addValidationRule('isYearOfBirth', (values, value) => {
|
|
value = parseInt(value);
|
|
if (typeof value !== 'number') {
|
|
return false;
|
|
}
|
|
return value < currentYear && value > currentYear - 130;
|
|
});
|
|
|
|
const App = React.createClass({
|
|
submit(data) {
|
|
alert(JSON.stringify(data, null, 4));
|
|
},
|
|
render() {
|
|
return (
|
|
<Formsy.Form onSubmit={this.submit} className="custom-validation">
|
|
<MyInput name="year" title="Year of Birth" type="number" validations="isYearOfBirth" validationError="Please type your year of birth" />
|
|
<DynamicInput name="dynamic" title="..." />
|
|
<button type="submit">Submit</button>
|
|
</Formsy.Form>
|
|
);
|
|
}
|
|
});
|
|
|
|
const DynamicInput = React.createClass({
|
|
mixins: [Formsy.Mixin],
|
|
getInitialState() {
|
|
return { validationType: 'time' };
|
|
},
|
|
changeValue(event) {
|
|
this.setValue(event.currentTarget.value);
|
|
},
|
|
changeValidation(validationType) {
|
|
this.setState({ validationType: validationType });
|
|
this.setValue(this.getValue());
|
|
},
|
|
validate() {
|
|
const value = this.getValue();
|
|
return value !== '' ? validators[this.state.validationType].regexp.test(value) : true;
|
|
},
|
|
getCustomErrorMessage() {
|
|
return this.showError() ? validators[this.state.validationType].message : '';
|
|
},
|
|
render() {
|
|
const className = this.props.className + ' ' + (this.showError() ? 'error' : null);
|
|
const errorMessage = this.getCustomErrorMessage();
|
|
|
|
return (
|
|
<div className='form-group'>
|
|
<label htmlFor={this.props.name}>{this.props.title}</label>
|
|
<input type='text' name={this.props.name} onChange={this.changeValue} value={this.getValue()}/>
|
|
<span className='validation-error'>{errorMessage}</span>
|
|
<Validations validationType={this.state.validationType} changeValidation={this.changeValidation}/>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
const Validations = React.createClass({
|
|
changeValidation(e) {
|
|
this.props.changeValidation(e.target.value);
|
|
},
|
|
render() {
|
|
const { validationType } = this.props;
|
|
return (
|
|
<fieldset onChange={this.changeValidation}>
|
|
<legend>Validation Type</legend>
|
|
<div>
|
|
<input name='validationType' type='radio' value='time' defaultChecked={validationType === 'time'}/>Time
|
|
</div>
|
|
<div>
|
|
<input name='validationType' type='radio' value='decimal' defaultChecked={validationType === 'decimal'}/>Decimal
|
|
</div>
|
|
<div>
|
|
<input name='validationType' type='radio' value='binary' defaultChecked={validationType === 'binary'}/>Binary
|
|
</div>
|
|
</fieldset>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<App/>, document.getElementById('example'));
|