Forms: required form fields allow empty submission

[yashitamittal11]

Impacted plugin

Jetpack

Quick summary

Users can submit forms even when required fields are left empty, despite those fields being marked as required in the form settings. Link to contact form- https://tenniswithglenn.com/contact-us/

Internal discussion: p1744263369807919-slack-C0160HSMDQV

Steps to reproduce

We are not able to reproduce this issue on our end. However, the user received empty field submissions for the required field in 9633561-zen.

When I enter random text in the date field, the form correctly shows an error about the date being invalid. However, the user received form submissions where the message field was empty and the date field contained invalid date.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

No response

[github-actions]

Support References

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

• 9633561-zen

[jeherve]

cc @Automattic/zap That seems like a recent regression that may have been introduced by a recent PR?

[simison]

Haven't had luck with replicating or figuring out what's going on:

• Checked that forms JS (which does validation) exists on the site, and it clearly runs when I hit submit:
  
• Checked that CSS selectors and required attributes needed for the validation are present on each input at the site
• Tested locally with forms created via block and with classic editor, using old TwentyTwentyTen theme
• Tested re-creating the form on their site with dropdowns, date etc
• Tested safari

[simison]

Lowered to normal-prio because this isn't globally broken to everyone.

We also cover this with tests

[ariel-maidana]

In the page https://tenniswithglenn.com/contact-us/ the "Message" textarea has unusually long name and id attributes --and possibly corrupted.

name="DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-widthinitial-scale10titleCustomInputPlaceholdertitlestyleitalic-placeholderplaceholderfont-styleitalicstyleheadbodyforminputtypetextclassitalic-placeholderidcustom_inputnamecustom_inputplaceholderEnteryourtexthereformbodyhtml"
id="contact-form-comment-DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-widthinitial-scale10titleCustomInputPlaceholdertitlestyleitalic-placeholderplaceholderfont-styleitalicstyleheadbodyforminputtypetextclassitalic-placeholderidcustom_inputnamecustom_inputplaceholderEnteryourtexthereformbodyhtml"

I think this might be causing the validation to fail, and allowing messages without content in the required textarea to go through.

I also noticed that the form is not part of the page, but it's in the template instead (Page: Contact-us template).