React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by ciaoben

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/5.4.0/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.error {
  border: 1px solid red;
}

JavaScript 1.7

var Form = React.createClass({
	getInitialState() {
  	return {values : {}, status: undefined, validations : {}, elements: {}, requireds: {}, disableds:{}, errors:{}}
  },
  
  componentDidMount() {
  	//console.log(this.refs, 'refs');
    Object.keys(this.refs).forEach((key)=>{
    	this.state.values[key] = '';
    });
  },
  
  click(e) {
  	if(e.which == 13) { 
    	console.log('click invio');
    }
  },
  
  submit(e) {
  	this.setState({status: 'loading'});
  	console.log(this.state.values, 'inviato', this.state.status);
    e.preventDefault();
    e.stopPropagation();
    window.setTimeout(()=>{ // simulate the call
    	this.setState({status: undefined});
    }, 5000)
  },
  
  __updateInternalState(e) {
  	if(e.type == "change" && !this.state.disableds[e.currentTarget.name]) {
    	if(e.currentTarget.type == 'checkbox') {
      	this.state.values[e.currentTarget.name] = e.currentTarget.checked;
      } else {
      	this.state.values[e.currentTarget.name] = e.currentTarget.value;
      }
    }
    console.log(this.state.values);
    this.__validate()
  },
  
  __validate() {
  	let isValid = true;
  	Object.keys(this.state.requireds).forEach((key)=>{
    	if (!this.state.values[key]) {
        isValid = false;
      	//this.setState({status: 'invalid'});
      }
    });
    
  	outer_loop:
    for (name in this.state.values) {
    	for (var i = 0; i < this.state.validations[name].length; i++) {
				if(typeof this.state.validations[name][i]['type'] == "string") {
        	var esit = validator[this.state.validations[name][i]['type']](this.state.values[name]);
        } else {
          var esit = validator[this.state.validations[name][i]['type'][0]](this.state.values[name], this.state.validations[name][i]['type'][1]);
        }
        if(!esit) {
          this.__addErrorFor(name,this.state.validations[name][i]['msg']);
        	isValid = false;
        	this.setState({status: 'invalid'});
        	//break outer_loop; 
        } else {
       ...