added in postcode validation regex and error msg

components/account/personaldetails.js

@@ -214,7 +214,10 @@ let PersonalDetails = (props) => {
 
     let errorsobj = {};
 
-    const required = (value) => (value ? undefined : "Is required");
+    const required = (value) =>
+        value
+            ? undefined
+            : t("account:register-new-account-postcode-label-errormsg");
     const emailRegex =
         /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
 
@@ -228,6 +231,14 @@ let PersonalDetails = (props) => {
             ? "Invalid phone number"
             : undefined;
 
+    const postcode = (value) =>
+        value &&
+        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
+            value
+        )
+            ? t("account:register-new-account-postcode-invalid-label-errormsg")
+            : undefined;
+
     const [hasErrors, setHasErrors] = useState("");
 
     const onHandleSubmit = (values) => {
@@ -375,8 +386,7 @@ let PersonalDetails = (props) => {
                                 type="text"
                                 className="govuk-input govuk-input--width-5"
                                 label={t("account:account-postcode-label")}
-                                validate={[required]}
-                                errorMsg="Is required"
+                                validate={[required, postcode]}
                             />
                         </fieldset>
                         <div className="govuk-button-group">

components/account/registerform.js

@@ -84,7 +84,10 @@ const RegisterForm = (props) => {
     const emailRegex =
         /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
 
-    const required = (value) => (value ? undefined : "Is required");
+    const required = (value) =>
+        value
+            ? undefined
+            : t("account:register-new-account-postcode-label-errormsg");
     const email = (value) =>
         value && !emailRegex.test(value) ? "Invalid email address" : undefined;
     const phoneNumber = (value) =>
@@ -106,6 +109,14 @@ const RegisterForm = (props) => {
             : undefined;
     const minLength5 = minLength(5);
 
+    const postcode = (value) =>
+        value &&
+        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
+            value
+        )
+            ? t("account:register-new-account-postcode-invalid-label-errormsg")
+            : undefined;
+
     const [hasErrors, setHasErrors] = useState("");
 
     const onHandleSubmit = (values) => {
@@ -298,10 +309,7 @@ const RegisterForm = (props) => {
                                 label={t(
                                     "account:register-new-account-postcode-label"
                                 )}
-                                validate={[required]}
-                                errorMsg={t(
-                                    "account:register-new-account-postcode-label-errormsg"
-                                )}
+                                validate={[required, postcode]}
                             />
                         </fieldset>
 

components/elements/index.js

@@ -66,7 +66,7 @@ const RenderTextfield = ({
                 {touched && error && (
                     <span id={id + "-error"} className="govuk-error-message">
                         <span className="govuk-visually-hidden">Error:</span>{" "}
-                        {errorMsg}
+                        {error}
                     </span>
                 )}
                 <input
@@ -101,7 +101,16 @@ export function Textfield(props) {
         maxFieldLength,
         hint,
     } = props;
-    const required = (value) => (value ? undefined : "Required");
+    const required = (value) =>
+        value ? undefined : t("newappeal:is-required-label");
+    const postcode = (value) =>
+        value &&
+        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
+            value
+        )
+            ? t("newappeal:invalid-postcode-label")
+            : undefined;
+
     let { t } = useTranslation();
 
     if (name == "pinswg_name") {
@@ -150,7 +159,6 @@ export function Textfield(props) {
                             className="govuk-input govuk-input--width-20"
                             validate={eval(validation)}
                             label={props.label}
-                            errorMsg="Is required"
                             maxFieldLength={props.maxFieldLength}
                         />
                     )

components/newappeal/buildprogress.js

@@ -72,6 +72,7 @@ const BuildProgress = (props) => {
                                 aria-current="step"
                                 data-show=""
                                 id={FieldsTranslations(progObj[index].title)
+                                    .toString()
                                     .replace(/\s+/g, "-")
                                     .toLowerCase()}
                             >
@@ -112,6 +113,7 @@ const BuildProgress = (props) => {
                                                     FieldsTranslations(
                                                         progObj[index].title
                                                     )
+                                                        .toString()
                                                         .replace(/\s+/g, "-")
                                                         .toLowerCase()
                                                 }