JSFiddle - React, Tailwind, and code Playground

by Kevin Mwangi

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var App = React.createClass({

  submit: function() {
    $('.type.example form')
      .form({
        on: 'blur',
        fields: {
          integer: {
            identifier: 'integer',
            rules: [{
              type: 'integer[1..100]',
              prompt: 'Please enter an integer value'
            }]
          },
          decimal: {
            identifier: 'decimal',
            rules: [{
              type: 'decimal',
              prompt: 'Please enter a valid decimal'
            }]
          }
        }
      });
  },
  render: function() {
    return ( 
        <form className="ui form">
            <div className="two fields">
                <div className="field">
                    <label> Integer </label> 
                    <input name="integer"
                            type="text"
                            value="101"/>
                </div> 
                <div className="field">
                    <label> E - mail </label> 
                    <input name="email"
                           type="text"
                           value="jack@foo"/>
                </div> 
            </div>
        </form>
    );
  }
});

React.render( <App /> , document.body);