+
+
\ No newline at end of file
diff --git a/examples/login/app.css b/examples/login/app.css
new file mode 100644
index 0000000..32b2cda
--- /dev/null
+++ b/examples/login/app.css
@@ -0,0 +1,4 @@
+.login {
+ width: 400px;
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/examples/login/app.js b/examples/login/app.js
new file mode 100644
index 0000000..8b1a4f7
--- /dev/null
+++ b/examples/login/app.js
@@ -0,0 +1,65 @@
+var React = require('react');
+var Formsy = require('./../..');
+
+var App = React.createClass({
+ getInitialState: function() {
+ return { canSubmit: false };
+ },
+ submit: function (data) {
+ alert(JSON.stringify(data, null, 4));
+ },
+ enableButton: function () {
+ this.setState({
+ canSubmit: true
+ });
+ },
+ disableButton: function () {
+ this.setState({
+ canSubmit: false
+ });
+ },
+ render: function () {
+ return (
+
+
+
+
+
+ );
+ }
+});
+
+var MyOwnInput = React.createClass({
+
+ // Add the Formsy Mixin
+ mixins: [Formsy.Mixin],
+
+ // setValue() will set the value of the component, which in
+ // turn will validate it and the rest of the form
+ changeValue: function (event) {
+ this.setValue(event.currentTarget.value);
+ },
+ render: function () {
+
+ // Set a specific className based on the validation
+ // state of this component. showRequired() is true
+ // when the value is empty and the required prop is
+ // passed to the input. showError() is true when the
+ // value typed is invalid
+ var className = this.props.className + ' ' + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
+
+ // An error message is returned ONLY if the component is invalid
+ // or the server has returned an error message
+ var errorMessage = this.getErrorMessage();
+
+ return (
+
+
+
+ {errorMessage}
+
+ );
+ }
+});
+
+React.render(, document.getElementById('example'));
\ No newline at end of file
diff --git a/examples/login/index.html b/examples/login/index.html
new file mode 100644
index 0000000..755fd78
--- /dev/null
+++ b/examples/login/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Login Example
+
+
+
+
+