refactor: add invalid error message for email field

public/css/main.css

@@ -2344,6 +2344,11 @@ div.tooltip {
   margin-right: 3em;
 }
 
+.invalid-input {
+  font-size: 0.875rem;
+  color: red;
+}
+
 /* Admin pannel css starts */
 
 .admin-pannel {

src/components/form/fields/Input.js

@@ -12,7 +12,9 @@ class Input extends Component {
     this.state = {
       fieldType: "",
       language: "en",
+      isInvalid: false,
     };
+    this.validateEmailInput = this.validateEmailInput.bind(this);
   }
 
   componentDidMount() {
@@ -34,6 +36,21 @@ class Input extends Component {
     }
   }
 
+  validateEmailInput = (e) => {
+    let inputData = e.target.value;
+    //eslint-disable-next-line
+    let allowedFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (inputData.match(allowedFormat)) {
+      this.setState({
+        isInvalid: false,
+      });
+    } else {
+      this.setState({
+        isInvalid: true,
+      });
+    }
+  };
+
   render() {
     // console.log(this.props.field.fieldType);
     // strings.setLanguage(
@@ -54,20 +71,40 @@ class Input extends Component {
               </span>
             )}
           </label>
-          
-          <input
-            type={
-              this.props.field.fieldType ===
-              LANG.FIELD_TYPES.numeric
-                ? "number"
-                : this.state.fieldType
-            }
-            id={"field-" + this.props.field.order}
-            name={"field_" + this.props.field.order}
-            className="form-control"
-            placeholder="Type here"
-            autoComplete="off"
-          />
+
+          {this.props.field.fieldType !==
+            LANG.FIELD_TYPES.email.toLowerCase() && (
+            <input
+              type={
+                this.props.field.fieldType === LANG.FIELD_TYPES.numeric
+                  ? "number"
+                  : this.state.fieldType
+              }
+              id={"field-" + this.props.field.order}
+              name={"field_" + this.props.field.order}
+              className="form-control"
+              placeholder="Type here"
+              autoComplete="off"
+            />
+          )}
+
+          {this.props.field.fieldType ===
+            LANG.FIELD_TYPES.email.toLowerCase() && (
+            <div className="">
+              <input
+                type="email"
+                id={"field-" + this.props.field.order}
+                name={"field_" + this.props.field.order}
+                className="form-control"
+                placeholder="Type here"
+                autoComplete="off"
+                onChange={this.validateEmailInput}
+              />
+              {this.state.isInvalid && (
+                <p className="invalid-input">Invalid email!</p>
+              )}
+            </div>
+          )}
         </div>
       </div>
     );