Add front-end validation

Author: Alexius-Huang

lib/components/app/ListForm.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+var errorTimeoutID = null
+
 export default class ListForm extends React.Component {
   constructor(props) {
     super(props)
@@ -8,10 +10,39 @@ export default class ListForm extends React.Component {
   handleCreateListItemEvent(event) {
     event.preventDefault()
     const input = this.refs['item-content']
-    this.props.createListItem(input.value)
+    this.validates(input.value,
+      /* Input success */
+      () => {
+        this.props.createListItem(input.value)
+      },
+      /* Input Error */
+      (error) => {
+        input.setAttribute('placeholder', error)
+        input.className = 'error'
+        if (errorTimeoutID) window.clearTimeout(errorTimeoutID)
+        errorTimeoutID = setTimeout(() => {
+          input.setAttribute('placeholder', '')
+          errorTimeoutID = null
+          input.className = ''
+        }, 3000)
+      }
+    )
+
     input.value = ''
   }
 
+  validates(value, success, error) {
+    if (value === '') {
+      error('Title cannot be empty!')
+    } else if (/\"/.test(value)) {
+      error('Wrong title format!')
+    } else if (value.length > 40) {
+      error('Maximum length: 40 characters')
+    } else {
+      success()
+    }
+  }
+
   render() {
     return (
       <div className="list-form">

public/css/index.css

@@ -59,6 +59,10 @@ a { text-decoration: none; }
   border: none;
   transition: .25s;
 }
+.list-form > input.error, .list-form input.error:focus {
+  background-color: #FEABB7;
+  transition: .25s;
+}
 .list-form > input:focus {
   background-color: #eee;
   outline: none;

public/js/index.js

@@ -23595,6 +23595,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var errorTimeoutID = null;
+
 var ListForm = function (_React$Component) {
   _inherits(ListForm, _React$Component);
 
@@ -23607,11 +23609,42 @@ var ListForm = function (_React$Component) {
   _createClass(ListForm, [{
     key: 'handleCreateListItemEvent',
     value: function handleCreateListItemEvent(event) {
+      var _this2 = this;
+
       event.preventDefault();
       var input = this.refs['item-content'];
-      this.props.createListItem(input.value);
+      this.validates(input.value,
+      /* Input success */
+      function () {
+        _this2.props.createListItem(input.value);
+      },
+      /* Input Error */
+      function (error) {
+        input.setAttribute('placeholder', error);
+        input.className = 'error';
+        if (errorTimeoutID) window.clearTimeout(errorTimeoutID);
+        errorTimeoutID = setTimeout(function () {
+          input.setAttribute('placeholder', '');
+          errorTimeoutID = null;
+          input.className = '';
+        }, 3000);
+      });
+
       input.value = '';
     }
+  }, {
+    key: 'validates',
+    value: function validates(value, success, error) {
+      if (value === '') {
+        error('Title cannot be empty!');
+      } else if (/\"/.test(value)) {
+        error('Wrong title format!');
+      } else if (value.length > 40) {
+        error('Maximum length: 40 characters');
+      } else {
+        success();
+      }
+    }
   }, {
     key: 'render',
     value: function render() {