robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

validation on date field in sub field for owner and tenant

Browse Source
This commit is contained in:
robbond
2024-12-11 05:56:41 +00:00
parent 5f801c9d25
commit 32664f73e6
1 changed files with 73 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+73 -54
View File
@@ -656,17 +656,20 @@ const RenderDatePicker = ({
</div>
)}
</legend>
{touched && error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{errorMsg}
</span>
)}
{!custom.hasOwnProperty("showErrorBottom")
? touched &&
error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{errorMsg}
</span>
)
: ""}
{/* {value}
<br />
@@ -693,6 +696,20 @@ const RenderDatePicker = ({
autoComplete="off"
//value={!value ? null : moment(value, "DD/MM/yyyy")}
/>
{custom.hasOwnProperty("showErrorBottom")
? touched &&
error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{error}
</span>
)
: ""}
</fieldset>
</div>
</>
@@ -2214,54 +2231,56 @@ const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
return errors;
};
const required = (value) =>
value ? undefined : t("newappeal:is-required-label");
return (
<ul>
<div>
{fields.map((member, index) => (
<div key={index}>
<h4>
{subTitle == "owners" ? "Owner" : "Tenant"} #
{index + 1}
</h4>
<ul className="subFieldList">
{fields.map((member, index) => (
<div key={index}>
<h4>
{subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
</h4>
<div className="fieldArrayContainer">
<Field
id={`${member}.${fields.name}`}
name={`${member}.${fields.name}`}
type="text"
component={RenderTextfield}
validate={[checkValue]}
label={
subTitle == "owners"
? "Owner name"
: "Tenant name"
}
className="govuk-input govuk-input--width-10"
showErrorBottom={true}
/>
<Field
name={`${member}.dateserved`}
type="text"
component={RenderDatePicker}
label="Date served "
dateStart={"-6m"}
dateEnd={"0"}
className="govuk-input govuk-input--width-10"
/>
<div className="fieldArrayContainer">
<Field
id={`${member}.${fields.name}`}
name={`${member}.${fields.name}`}
type="text"
component={RenderTextfield}
validate={[checkValue]}
label={
subTitle == "owners"
? "Owner name"
: "Tenant name"
}
className="govuk-input govuk-input--width-10"
showErrorBottom={true}
/>
<Field
name={`${member}.dateserved`}
type="text"
component={RenderDatePicker}
label="Date served "
dateStart={"-6m"}
dateEnd={"0"}
validate={[required]}
className="govuk-input govuk-input--width-10"
showErrorBottom={true}
/>
<button
type="button"
title="Remove"
onClick={() => fields.remove(index)}
className="govuk-button fieldArrayDelete"
>
X
</button>
</div>
<button
type="button"
title="Remove"
onClick={() => fields.remove(index)}
className="govuk-button fieldArrayDelete"
>
X
</button>
</div>
))}
</div>
</div>
))}
<br />
{fields.length < custom.maxSubField && (
<button