Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email Input Field Hides on Invalid Email Submission #4356

Open
utkarshahu opened this issue Jan 13, 2025 · 1 comment
Open

Email Input Field Hides on Invalid Email Submission #4356

utkarshahu opened this issue Jan 13, 2025 · 1 comment

Comments

@utkarshahu
Copy link

Description

From the image, it seems like the email input field hides or collapses when an invalid email is entered. This could be due to an issue with CSS or JavaScript handling the form validation.

Here’s a detailed issue report you can contribute to the repository:


Issue Title:

Email Input Field Hides on Invalid Email Submission

Description:

When an invalid email is entered in the subscription form, the input field disappears instead of staying visible for the user to correct their input. This affects the user experience, as users need to reload the page to access the input field again.

Steps to Reproduce:

  1. Navigate to the subscription form on the website.
  2. Enter an invalid email address (e.g., ee).
  3. Submit the form by clicking the "Subscribe" button.

Expected Behavior:

The input field should remain visible, allowing the user to correct their input.

Actual Behavior:

The email input field hides after submission, and the error messages are displayed.

Screenshot 2025-01-14 012746

Suggested Fix:

  • Check the CSS for any display: none or visibility: hidden applied to the input field upon form validation failure.
  • Ensure the JavaScript handling form validation doesn't unintentionally modify the input field's visibility.
  • Update the validation script to focus the input field after displaying an error message.

Environment:

  • Browser: [Specify browser and version, e.g., Chrome 119.0.0]
  • OS: [Specify operating system, e.g., Windows 11]
  • Framework: Nightwatch.js or associated libraries.

Suggested solution

#error-message {
color: red;
font-size: 14px;
margin-top: 4px;
position: absolute; /* Prevent layout shift /
}
input[type="email"] {
margin-bottom: 20px; /
Add space for error messages */
}

Alternatives / Workarounds

No response

Additional Information

Sir, I want to contribute to this project by fixing this error. Please advise me where I can find the file for the email input field. I have searched a lot but couldn’t locate it. Please help me identify the file location so I can fix it and create a pull request.

@avanshh99
Copy link

Hey there please assign me this issue i think i got this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants