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

Forms: Empty required choice fields cause form submission to 404 #41969

Open
jp-imagines opened this issue Feb 21, 2025 · 4 comments · May be fixed by #41979
Open

Forms: Empty required choice fields cause form submission to 404 #41969

jp-imagines opened this issue Feb 21, 2025 · 4 comments · May be fixed by #41979
Assignees
Labels
[Block] Contact Form Form block (also see Contact Form label) Customer Report Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report" [Feature] Contact Form [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] Low [Status] In Progress Triaged [Type] Bug When a feature is broken and / or not performing as intended

Comments

@jp-imagines
Copy link

jp-imagines commented Feb 21, 2025

Impacted plugin

Jetpack

Quick summary

When building a form, if you add any field that takes one or more choices (multiple checkboxes, radio buttons, dropdown), make that selection required, but don't add any options to choose from, the form becomes unusable. There are no options to select for the required field, but instead of showing an error about missing required fields, the form appears to submit and redirects to a 404 error.

Only tested so far on Dotcom Simple. Initial report in 9436738-zd-a8c.

Steps to reproduce

Steps to reproduce

  1. Create a new page.
  2. Add the Form block, select any of the predefined options (e.g. contact form).
  3. Add a new block into the form: Single Choice (Radio), Multiple Choice (Checkbox), or Dropdown Field.
  4. Select the parent of the block that was just inserted (if needed) and mark it as required. Do not add any options to choose from.
  5. Save the page.
  6. On the live page, note that this block isn't visible, as there are no options to choose from.
  7. Fill out the form and submit.
Block code sample:
<!-- wp:jetpack/contact-form -->
<div class="wp-block-jetpack-contact-form"><!-- wp:jetpack/field-name {"required":true} /-->

<!-- wp:jetpack/field-radio {"required":true} -->
<div class="wp-block-jetpack-field-radio"><!-- wp:jetpack/field-option-radio /--></div>
<!-- /wp:jetpack/field-radio -->

<!-- wp:jetpack/field-textarea {"label":"Message"} /-->

<!-- wp:jetpack/button {"element":"button","text":"Contact Us","lock":{"remove":true}} /--></div>
<!-- /wp:jetpack/contact-form -->

What I expected

For other required fields, an error is shown letting the submitter know that the field is required (Please fill out this field. / Please make sure all fields are valid. You need to fix x error(s).). There should be a similar error in this instance as well.

Ideally, it should be impossible to save a form with an invalid multi-input like this, especially if it's marked as required.

What actually happened

The form appears to submit, but redirects to /?page=1#contact-form-{page-ID}, which doesn't exist (error 404).

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No revenue impact

If a workaround is available, please outline it here.

Removing the offending block, marking it as not required, or adding 1 or more options to choose from fixes the issue.

Platform (Simple and/or Atomic)

Simple

@jp-imagines jp-imagines added [Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Type] Bug When a feature is broken and / or not performing as intended Needs triage Ticket needs to be triaged labels Feb 21, 2025
Copy link
Contributor

Support References

This comment is automatically generated. Please do not edit it.

  • 9436738-zen

@github-actions github-actions bot added the Customer Report Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report" label Feb 21, 2025
@bizanimesh bizanimesh added Triaged and removed Needs triage Ticket needs to be triaged labels Feb 22, 2025
@matticbot matticbot moved this from Needs Triage to Triaged in Automattic Prioritization: The One Board ™ Feb 22, 2025
@bizanimesh
Copy link

I can reproduce the issue as mentioned above on the Simple and Atomic sites.

But on the self-hosted Jetpack site, when I submit the form, it doesn't redirect me to a 404 page and shows the error message "Choose one option is required" - here is the screenshot.

@talldan
Copy link
Contributor

talldan commented Feb 24, 2025

I have a PR that fixes the 404 here - #41947.

But I think there are two separate issues in addition to this:

  • The empty multi-choice field correctly doesn't trigger JS validation, but incorrectly still seems to cause PHP valdiation to fail.
  • As mentioned in Fix form validation with js disabled #41947, after the 404 issue is fixed, the form takes two submissions to display validation error messages

@talldan talldan self-assigned this Feb 24, 2025
@talldan
Copy link
Contributor

talldan commented Feb 24, 2025

The empty multi-choice field correctly doesn't trigger JS validation, but incorrectly still seems to cause PHP valdiation to fail.

I've put together #41979 to fix this part.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Contact Form Form block (also see Contact Form label) Customer Report Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report" [Feature] Contact Form [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] Low [Status] In Progress Triaged [Type] Bug When a feature is broken and / or not performing as intended
Projects
Development

Successfully merging a pull request may close this issue.

3 participants