Also validate on constructor

src/components/inputs/UrlInput.jsx

@@ -3,22 +3,8 @@ import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import SmallError from '../util/SmallError'
 
-class UrlInput extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-  }
 
-  state = {
+function validate (url) {
-    error: null,
-  }
-
-  onInput = (url) => {
   let error;
   const getProtocol = (url) => {
     try {
@@ -42,7 +28,31 @@ class UrlInput extends React.Component {
     );
   }
 
-    this.setState({error});
+  return error;
+}
+
+class UrlInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
+  }
+
+  onInput = (url) => {
+    this.setState({
+      error: validate(url)
+    });
   }
 
   render () {