FS-5018: remove html5 validation and add email validation

[NarenderRajuB]

https://mhclgdigital.atlassian.net/browse/FS-5018

Change description

Remove HTML5 validation and add email address validation in backend

• [ x] Unit tests and other appropriate tests added or updated
• README and other documentation has been updated / added (if needed)
• [x ] Commit messages are meaningful and follow good commit message guidelines (e.g. "FS-XXXX: Add margin to nav items preventing overlapping of logo")

[nuwan-samarasinghe]

LGTM also please do a test. with an existing fund

[wjrm500]

Hey @NarenderRajuB thanks for this, have tested locally by:

• Going to https://form-designer.levellingup.gov.localhost:3000/app/designer/f7luKiZDuI
• Adding a new page linked from the first page (which contains an email address field) to allow the first page to be submitted
• Previewing the first page
• Entering some invalid email address and submitting form

Behaviour was as expected 👍

However, I'm struggling to review the code a bit, so maybe you could help me out. My understanding was that the requirement here was effectively to take the EmailAddressField from the digital-form-builder base repo, copy paste it into Adapter and make some small tweak to add the desired validation.

Based on this, I'd expect a minimal diff between the base repo class and this one, and a clear explanation of what validation we're performing and how this has been implemented by the new code. This would make this PR easy to review.

What I see instead are a number of changes between the two classes e.g.,:

Base repo EmailAddressField:

getFormSchemaKeys() {
      return {
          [this.name]: this.formSchema,
      };
}

This new implementation:

getFormSchemaKeys() {
    return getFormSchemaKeys(this.name, "string", this);
}

Likewise there are other differences that I'm not sure about. So can I ask that you describe the approach you took here and explain any differences between the EmailAddressField in the base repo and the new implementation? Thanks

[NarenderRajuB]

Hey @NarenderRajuB thanks for this, have tested locally by:

• Going to https://form-designer.levellingup.gov.localhost:3000/app/designer/f7luKiZDuI
• Adding a new page linked from the first page (which contains an email address field) to allow the first page to be submitted
• Previewing the first page
• Entering some invalid email address and submitting form

Behaviour was as expected 👍

However, I'm struggling to review the code a bit, so maybe you could help me out. My understanding was that the requirement here was effectively to take the EmailAddressField from the digital-form-builder base repo, copy paste it into Adapter and make some small tweak to add the desired validation.

Based on this, I'd expect a minimal diff between the base repo class and this one, and a clear explanation of what validation we're performing and how this has been implemented by the new code. This would make this PR easy to review.

What I see instead are a number of changes between the two classes e.g.,:

Base repo EmailAddressField:

getFormSchemaKeys() {
      return {
          [this.name]: this.formSchema,
      };
}

This new implementation:

getFormSchemaKeys() {
    return getFormSchemaKeys(this.name, "string", this);
}

Likewise there are other differences that I'm not sure about. So can I ask that you describe the approach you took here and explain any differences between the EmailAddressField in the base repo and the new implementation? Thanks

[NarenderRajuB]

Hey @NarenderRajuB thanks for this, have tested locally by:

• Going to https://form-designer.levellingup.gov.localhost:3000/app/designer/f7luKiZDuI
• Adding a new page linked from the first page (which contains an email address field) to allow the first page to be submitted
• Previewing the first page
• Entering some invalid email address and submitting form

Behaviour was as expected 👍

However, I'm struggling to review the code a bit, so maybe you could help me out. My understanding was that the requirement here was effectively to take the EmailAddressField from the digital-form-builder base repo, copy paste it into Adapter and make some small tweak to add the desired validation.

Based on this, I'd expect a minimal diff between the base repo class and this one, and a clear explanation of what validation we're performing and how this has been implemented by the new code. This would make this PR easy to review.

What I see instead are a number of changes between the two classes e.g.,:

Base repo EmailAddressField:

getFormSchemaKeys() {
      return {
          [this.name]: this.formSchema,
      };
}

This new implementation:

getFormSchemaKeys() {
    return getFormSchemaKeys(this.name, "string", this);
}

Likewise there are other differences that I'm not sure about. So can I ask that you describe the approach you took here and explain any differences between the EmailAddressField in the base repo and the new implementation? Thanks

@wjrm500 i did followed the approach we are using for websitefield.ts

[nuwan-samarasinghe]

I think fair change so approving

[wjrm500]

Thanks for making the changes @NarenderRajuB

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud