Add example of custom validation

examples/custom-validation/app.css

@@ -0,0 +1,4 @@
+.custom-validation {
+  width: 500px;
+  margin: 0 auto;
+}

examples/custom-validation/app.js

@@ -0,0 +1,123 @@
+var React = require('react');
+var Formsy = require('./../..');
+
+var currentYear = new Date().getFullYear();
+
+var 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', function (value) {
+  value = parseInt(value);
+  if (typeof value !== 'number' || value !== value) {
+    return false;
+  }
+  return value < currentYear && value > currentYear - 130;
+});
+
+var App = React.createClass({
+  submit: function (data) {
+    alert(JSON.stringify(data, null, 4));
+  },
+  render: function () {
+    return (
+      <Formsy.Form onSubmit={this.submit} className="custom-validation">
+        <MyOwnInput name="year" title="Year of Birth" type="number" validations="isYearOfBirth" validationError="Please type your year of birth" />
+        <DynamicInput name="dynamic" title="..." type="text" />
+        <button type="submit">Submit</button>
+      </Formsy.Form>
+    );
+  }
+});
+
+var MyOwnInput = React.createClass({
+  mixins: [Formsy.Mixin],
+  changeValue: function (event) {
+    this.setValue(event.currentTarget.value);
+  },
+  render: function () {
+    var className = this.props.className + ' ' + (this.showError() ? 'error' : null);
+    var errorMessage = this.getErrorMessage();
+
+    return (
+      <div className='form-group'>
+        <label htmlFor={this.props.name}>{this.props.title}</label>
+        <input type={this.props.type || 'text'} name={this.props.name} onChange={this.changeValue} value={this.getValue()}/>
+        <span className='validation-error'>{errorMessage}</span>
+      </div>
+    );
+  }
+});
+
+var DynamicInput = React.createClass({
+  mixins: [Formsy.Mixin],
+  getInitialState: function() {
+    return {
+      validationType: 'time'
+    };
+  },
+  changeValue: function (event) {
+    this.setValue(event.currentTarget.value);
+  },
+  changeValidation: function(validationType) {
+    this.setState({
+      validationType: validationType
+    });
+    this.setValue(this.getValue());
+  },
+  validate: function () {
+    var value = this.getValue();
+    return value === '' ? true : validators[this.state.validationType].regexp.test(value);
+  },
+  getCustomErrorMessage: function() {
+    return this.showError() ? validators[this.state.validationType].message : '';
+  },
+  render: function () {
+    var className = this.props.className + ' ' + (this.showError() ? 'error' : null);
+    var errorMessage = this.getCustomErrorMessage();
+
+    return (
+      <div className='form-group'>
+        <label htmlFor={this.props.name}>{this.props.title}</label>
+        <input type={this.props.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>
+    );
+  }
+});
+
+var Validations = React.createClass({
+  changeValidation: function(e) {
+    this.props.changeValidation(e.target.value);
+  },
+  render: function() {
+    return (
+      <fieldset onChange={this.changeValidation}>
+        <legend>Validation Type</legend>
+        <div>
+          <input name='validaionType' type='radio' value='time' checked={this.props.validationType === 'time'}/>Time
+        </div>
+        <div>
+          <input name='validaionType' type='radio' value='decimal' checked={this.props.validationType === 'decimal'}/>Decimal
+        </div>
+        <div>
+          <input name='validaionType' type='radio' value='binary' checked={this.props.validationType === 'binary'}/>Binary
+        </div>
+      </fieldset>
+    );
+  }
+});
+
+React.render(<App/>, document.getElementById('example'));

examples/custom-validation/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Custom Validation Example</title>
+    <link href="../global.css" rel="stylesheet"/>
+    <link href="app.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <h1 class="breadcrumbs"><a href="../index.html">Formsy React Examples</a> / Custom Validation</h1>
+    <div id="example"/>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/custom-validation.js"></script>
+  </body>
+</html>

examples/global.css

@@ -25,17 +25,20 @@ form {
 }
 
 .form-group {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 
 .form-group label {
   display: inline-block;
   max-width: 100%;
-  margin-bottom: 5px;
+  margin-top: 5px;
   font-weight: 700;
 }
 
-.form-group input {
+.form-group input[type='text'],
+.form-group input[type='email'],
+.form-group input[type='number'],
+.form-group input[type='password'] {
   display: block;
   width: 100%;
   height: 34px;
@@ -52,7 +55,7 @@ form {
 
 .validation-error {
   color: red;
-  margin-top: 5px;
+  margin: 5px 0;
   display: inline-block;
 }
 

examples/index.html

@@ -8,6 +8,7 @@
     <h1>Formsy React Examples</h1>
     <ul>
       <li><a href="login/index.html">Login Page</a></li>
+      <li><a href="custom-validation/index.html">Custom Validation</a></li>
     </ul>
   </body>
 </html>