Fix required form radio/checkbox fields

[EvanHerman]

Note

If using Go to test, this will require godaddy-wordpress/go#579

Description

Made sure that the checkboxes/radio fields of form block, when set to required, prevent the form from being submitted until at least one option/checkbox is selected.

Resolves #1517 and resolves #1653.

Note: HTML does not provide a way to require checkbox groups. The workaround was to enqueue a script and display a notice above the field when no checkboxes were checked.

The notice: Please select at least one checkbox.
Wrapped in the filter: coblocks_form_checkbox_required_text

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

How has this been tested?

Manually

Checklist:

• My code is tested
• My code has proper inline documentation
• I've included any necessary tests
• I've included developer documentation
• I've added proper labels to this pull request

[cypress]

---

Test summary

58 • 10 • 0 • 0

---

Run details

Project	CoBlocks
Status	Failed
Commit	036a232
Started	Sep 3, 2020 7:40 PM
Ended	Sep 3, 2020 7:43 PM
Duration	03:29 💡
OS	Linux Debian - 10.5
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Failures

Run group: e2e-chrome (Linux, Chrome )
	src/extensions/layout-selector/test/layout-selector.cypress.js ⏯		5
1	Extension: Layout Selector > shows modal on add new "page" post_type
2	Extension: Layout Selector > loads layouts of each category
3	Extension: Layout Selector > inserts layout into page
4	Extension: Layout Selector > inserts blank layout into page
5	Extension: Layout Selector > does not open modal when disabled via the "Editor Settings" panel
Run group: e2e-firefox (Linux, Firefox )
	src/extensions/layout-selector/test/layout-selector.cypress.js ⏯		5
1	Extension: Layout Selector > shows modal on add new "page" post_type
2	Extension: Layout Selector > loads layouts of each category
3	Extension: Layout Selector > inserts layout into page
4	Extension: Layout Selector > inserts blank layout into page
5	Extension: Layout Selector > does not open modal when disabled via the "Editor Settings" panel

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[AnthonyLedesma]

Left a few comments regarding changes.

[EvanHerman]

@AnthonyLedesma Good for another review 👌

[AnthonyLedesma]

Confirmed this closes #1653.

[AnthonyLedesma]

We are very close. The required attributes seem to be properly preventing form submission but we have a case where no errors are shown to the user. To replicate this bug use the following markup.

<!-- wp:coblocks/form -->
<!-- wp:coblocks/field-email {"required":true} /-->

<!-- wp:coblocks/field-radio {"required":true,"options":["Yes","No"]} /-->

<!-- wp:coblocks/field-checkbox {"required":true,"options":["Yes","No"]} /-->

<!-- wp:coblocks/field-textarea {"required":true} /-->

<!-- wp:coblocks/field-submit-button {"submitButtonText":"Contact Us"} /-->
<!-- /wp:coblocks/form -->

When you leave the radio options unchecked and fill all other form elements, we have a case where form fails to submit and no errors are shown to the user. There should be an error message here specifying that an option must be selected.

[EvanHerman]

@AnthonyLedesma This was a bug with Go, setting the radio buttons to appearance: none;

Feel free to pull down godaddy-wordpress/go#579 and test, or use a different theme.

[AnthonyLedesma]

Confirmed that the bug reported was with Go.