feat(Textfield): check validity

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mdc-web",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React web components for Material Design",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",

src/Textfield/Label.js

@@ -2,21 +2,23 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
 const propTypes = {
-  focused: PropTypes.bool,
-  disabled: PropTypes.bool,
   children: PropTypes.node,
+  disabled: PropTypes.bool,
+  focused: PropTypes.bool,
+  invalid: PropTypes.bool,
 };
 
 const ROOT = 'mdc-textfield';
 const UPGRADED = `${ROOT}--upgraded`;
 const DISABLED = `${ROOT}--disabled`;
 const FOCUSED = `${ROOT}--focused`;
-// const INVALID = `${ROOT}--invalid`;
+const INVALID = `${ROOT}--invalid`;
 
-const Label = ({ disabled, focused, children }) => {
+const Label = ({ disabled, focused, children, invalid }) => {
   const classes = {};
   classes[FOCUSED] = focused;
   classes[DISABLED] = disabled;
+  classes[INVALID] = invalid;
 
   return (
     <label

src/Textfield/Textfield.js

@@ -22,22 +22,24 @@ class Textfield extends React.PureComponent {
     this.setState({ focus: true });
   }
 
-  onBlur() {
-    this.setState({ focus: false });
+  onBlur(event) {
+    const invalid = !event.target.checkValidity();
+    this.setState({ focus: false, invalid });
   }
 
   render() {
-    const { focus } = this.state;
+    const { focus, invalid } = this.state;
     const { floatingLabel, disabled, value, ...otherProps } = this.props;
     return (
       <Label
         disabled={disabled}
         focused={focus}
+        invalid={invalid}
       >
         <Input
           disabled={disabled}
-          onFocus={this.onFocus}
           onBlur={this.onBlur}
+          onFocus={this.onFocus}
           value={value}
           {...otherProps}
         />