var FG = window.FormGenerator
, t = window.FormGenerator.tools
, GeneratedForm = FG()
, validateForm = GeneratedForm.validateForm;
var App = React.createClass({
// ======================== Life cycle ======================= //
getInitialState: function () {
return {
value: t.evalDefaults( meta ),
errors: {}
};
},
componentDidMount: function () {
this._route = t.buildRouter(
'btnSend:click', [ btnClickHandler ]
);
},
// ======================== Handlers ========================= //
handleFormChanged: function ( newValue, change, fldErrors ) {
this.setState({
value: newValue,
errors: t.merge( this.state.errors, fldErrors )
});
},
handleFormEvent: function ( fieldID, eventName, eventInfo ) {
this._route( fieldID + ':' + eventName );
},
// ======================== Renders ========================== //
render: function() {
return (<GeneratedForm meta={meta}
value={this.state.value}
errors={this.state.errors}
onChange={this.handleFormChanged}
onEvent={this.handleFormEvent}/>);
}
});
function btnClickHandler () {
this.setState({
errors: validateForm( meta, this.state.value )
});
}
React.render( <App />, document.body );
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="http://azaviruha.github.io/repo/js/react-form-generator.global.min.js"></script>
<script>
window.meta = {
"fields": {
"field1": {
"renderer": "text",
"validators": [
{
"rule": "required",
"message": "Field is required"
},
{
"rule": "maxLength",
"value": 15,
"message": "Maximum length of field is 15 characters"
}
]
},
"field2": {
"renderer": "text",
"defaultValue": "1",
"validators": [
{
"rule": "required",
"message": "Field is required"
},
{
"rule": "numbers",
"value": 5,
"message": "Only numbers allowed"
}
]
},
"btnSend": {
"renderer": "button",
"rendererSpecific": {
"text": "Send"
}
}
},
"layout": {
"grid": {
"css": "container demo-form",
"rows": [{
"css": "row",
"cells": [{
"css": "col-xs-12 col-sm-12 col-md-10",
"content": [{
"renderer": "default",
"rendererSpecific": {
"fieldID": "field1",
"label": "Field #1:",
"css": {
"wrapper": "row",
"label": "col-xs-2 col-sm-2 col-md-2",
"field": "col-xs-10 col-sm-10 col-md-10",
"errors": "col-xs-12 col-sm-12 col-md-12"
}
}
}]
}]
}, {
"css": "row",
"cells": [{
"css": "col-xs-12 col-sm-12 col-md-10",
"content": [{
"renderer": "default",
"rendererSpecific": {
"fieldID": "field2",
"label": "Field #2:",
"css": {
"wrapper": "row",
"label": "col-xs-2 col-sm-2 col-md-2",
"field": "col-xs-10 col-sm-10 col-md-10",
"errors": "col-xs-12 col-sm-12 col-md-12"
}
}
}]
}]
}, {
"css": "row",
"cells": [{
"css": "col-xs-12 col-sm-12 col-md-10",
"content": [{
"renderer": "unwrapped",
"rendererSpecific": {
"fieldID": "btnSend",
"css": "btn col-xs-3 col-sm-3 col-md-1"
}
}]
}]
}]
}
}
}
</script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
External resources loaded into this fiddle: