validation on date field in sub field for owner and tenant

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