improved form validation

Author: ShMcK

lib/components/TutorialConfig/index.js

@@ -84,8 +84,8 @@ var TutorialConfig = (function (_super) {
                     floatingLabelText: 'Test Runner',
                     id: 'runner',
                 }), tabIndex: '3'}), 
-                React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: invalid, tabIndex: '4'}), 
-                React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.props.routeToPage.bind(this), tabIndex: '5'}))));
+                React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: invalid}), 
+                React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.props.routeToPage.bind(this)}))));
     };
     TutorialConfig = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/components/TutorialInfo/index.js

@@ -41,7 +41,7 @@ var TutorialInfo = (function (_super) {
         this.props.initialize({
             description: '',
             version: '0.1.0',
-            keywords: 'coderoad, tutorial'
+            keywords: ''
         });
     };
     TutorialInfo.prototype.componentDidMount = function () {
@@ -58,7 +58,7 @@ var TutorialInfo = (function (_super) {
         var description = values.description, version = values.version, keywords = values.keywords;
         this.props.save(Object.assign({}, this.props.packageJson, {
             description: description, version: version,
-            keywords: keywords.split(',')
+            keywords: ("coderoad, tutorial" + (keywords.length ? ', ' + keywords : '')).split(', ')
         }));
     };
     TutorialInfo.prototype.render = function () {
@@ -69,17 +69,17 @@ var TutorialInfo = (function (_super) {
                 React.createElement(redux_form_1.Field, {name: 'description', component: textField_1.default.bind(null, {
                     hintText: 'Tutorial description',
                     floatingLabelText: 'Description',
-                })}), 
+                }), tabIndex: '1'}), 
                 React.createElement(redux_form_1.Field, {name: 'version', component: textField_1.default.bind(null, {
                     hintText: '0.1.0',
                     floatingLabelText: 'Version',
                     disabled: true,
-                })}), 
+                }), tabIndex: '2'}), 
                 React.createElement(redux_form_1.Field, {name: 'keywords', component: textField_1.default.bind(null, {
                     hintText: 'coderoad, react, js, etc',
                     floatingLabelText: 'Keywords',
-                })}), 
-                React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
+                }), tabIndex: '3'}), 
+                React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: invalid}))));
     };
     TutorialInfo = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/components/TutorialInfo/validate.js

@@ -8,10 +8,7 @@ var validate = debounce(function (values) {
             errors[field] = 'Required';
         }
     });
-    if (values.description && values.description.length < 3) {
-        errors.description = 'Incomplete tutorial description';
-    }
-    if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
+    if (!values.version || !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
         errors.version = 'Invalid version number';
     }
     return errors;

src/components/TutorialInfo/index.tsx

@@ -35,7 +35,7 @@ class TutorialInfo extends React.Component<{
     this.props.initialize({
       description: '',
       version: '0.1.0',
-      keywords: 'coderoad, tutorial'
+      keywords: ''
     });
   }
   componentDidMount() {
@@ -58,7 +58,9 @@ class TutorialInfo extends React.Component<{
       this.props.packageJson,
       {
         description, version,
-        keywords: keywords.split(',')
+        keywords: (`coderoad, tutorial${
+          keywords.length ? ', ' + keywords : ''
+        }`).split(', ')
       }
     ));
   }
@@ -104,7 +106,7 @@ class TutorialInfo extends React.Component<{
             style={styles.button}
             label='Save'
             primary={true}
-            disabled={pristine || submitting || invalid}
+            disabled={invalid}
           />
         </form>
       </Card>

src/components/TutorialInfo/validate.ts

@@ -8,10 +8,10 @@ const validate = debounce(values => {
       errors[field] = 'Required';
     }
   });
-  if (values.description && values.description.length < 3) {
-    errors.description = 'Incomplete tutorial description';
-  }
-  if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
+  // if (!values.description || values.description.length) {
+  //   errors.description = 'Incomplete tutorial description';
+  // }
+  if (!values.version || !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
     errors.version = 'Invalid version number';
   }
   return errors;