From 51240889ea6b13a9ee9292ec6e42205d7e8a9bb4 Mon Sep 17 00:00:00 2001
From: SakthivelG <sakthivel.govindan@tarento.com>
Date: Mon, 21 Mar 2022 11:15:53 +0530
Subject: [PATCH] refactor: add invalid error message for email field
---
public/css/main.css | 5 +++
src/components/form/fields/Input.js | 65 ++++++++++++++++++++++-------
2 files changed, 56 insertions(+), 14 deletions(-)
diff --git a/public/css/main.css b/public/css/main.css
index 52ca422..2d27e8e 100644
--- a/public/css/main.css
+++ b/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 {
diff --git a/src/components/form/fields/Input.js b/src/components/form/fields/Input.js
index 58b1b29..e1c6a62 100644
--- a/src/components/form/fields/Input.js
+++ b/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>
);
--
GitLab