[Bug] Poor Form Validation in newsletter signup form

Queen-codes commented 1 week ago

Description

When submitting the subscribe to the newsletter form in the footer section, there's a redirection to a page to provide additional information. However, if there are validation errors (e.g., invalid email), the fields with errors do not display any visible validation messages or indicators for the fields affected. Although the form is not submitted, the lack of specific field validation feedback results in poor user experience.

Reproduction

Go to the newsletter section in the footer and enter a input then click on the subscribe button.
In the form that appears, try inputting an invalid email address or leaving some inputs blank
Click on submit
an error message would appear at the top without specific validation for the invalid fields.

Expectation

There should be validation messages or features such as(a red border around the input field) in fields with errors, clearly specifying what needs to be corrected.
The form should highlight the affected fields to help users know how to fix the issue

Screenshots

Additional context

Proper form validation with clear feedback on the fields that need correction will improve accessibility and user experience.

Resolution

[x] I would be interested in resolving this bug.

OmarAmeen01 commented 5 days ago

@possumbilities I enquired into this issue I saw that on entering email in the field at footer we are redirected to other page and on that page it shows there are some errors and if we enter only email and leave all other fields untouched and hit subscribe we are able to subscribe to the newsletter anyways

what I am suggesting is that if you need those field make them mandatory or else that page should be remove and user should be able to enter the email at footer only and he should receive the msg subscribed to the newsletter or this email is already subscribed to the newsletter .

this way we would be able to:

minimize the complexity of the subscription to the newsletter
improve UX of the site
reduce the server load as it doesn't have to serve another page

[x] I can help this implement

OmarAmeen01 commented 5 days ago

@possumbilities I enquired into this issue I saw that on entering email in the field at footer we are redirected to other page and on that page it shows there are some errors and if we enter only email and leave all other fields untouched and hit subscribe we are able to subscribe to the newsletter anyways

what I am suggesting is that if you need those field make them mandatory or else that page should be remove and user should be able to enter the email at footer only and he should receive the msg subscribed to the newsletter or this email is already subscribed to the newsletter .

this way we would be able to:

minimize the complexity of the subscription to the newsletter

improve UX of the site

reduce the server load as it doesn't have to serve another page

I also noticed that at footer if we don't enter the email and press subscribe button we reach the same page but this time it highlights the field that is required i:e email

alternate approach we are gonna keep that page remove the input field just show the subscribe button on the footer that redirects user to that page where he can provide information

possumbilities commented 5 days ago

Hi all!

The form is hosted externally not a part of Vocabulary proper, so routes of solution here would have to be confined to only the form within Vocabulary itself, not the form that it sends you to (which has more fields and is within another system of management).

OmarAmeen01 commented 5 days ago

given that information then solution that seems feasible is :

we remove input field from the footer since user has to fill it again on the redirected page
and keep only subscribe button that redirects the user to that page

let me know if this solution seems feasible

possumbilities commented 5 days ago

@OmarAmeen01 That would not work either, the structure and design of the signup form input in the footer would need to remain as is.

It may be instead that there isn't a stable route to improve the validation on the initial form a this time and work on this might need to be blocked or closed.

OmarAmeen01 commented 5 days ago

then if you have any solution I would be happy to hear and implement them

possumbilities commented 5 days ago

Work here needs to focus on just the form that is present within Vocabulary itself:

The image in the original Description above is for a form hosted elsewhere and not something the scope of this project an directly affect.

My suggestion here is that the only way to resolve this in some way at this time might be to prevent the form from submitting if it is not in fact filled out (and possibly check that its filled out with an email (though this should be mindful of the wide variation in email structure and domain .TLDs.

A visible error below the input box could indicate a helpful warning.

Form validation has come a long way with CSS and HTML capabilities and I would strongly encourage routes of solution here to minimize the us of JS as much as possible.

egbadon-victor commented 2 days ago

Hi @possumbilities .

From your suggestion, a few changes to the html markup will do just fine and there would be no need for js.

The required attribute was given and empty string "" and a novalidate attribute was present on the form element (even though this was given an empty string too). My question is now why those attributes were there in the first place.

possumbilities commented 2 days ago

@egbadon-victor the form was inherited from an older project, I'm unsure why they were present currently, but if there's a straight-forward way to address some kind of validation + warning that would better UX going forward.

egbadon-victor commented 49 minutes ago

@possumbilities well understood. Fix has been implemented

creativecommons / vocabulary