NO BUG: Form field validation (especially with checkbox and radio fields)

[ainom]

I"ve added a pattern attribute to a form field, following the instructions in the Academy (Form | Bricks Academy). I even corrected the typo in the instructions (phone numbers require a ^\d{3}-\d{3}-\d{4}$ pattern, at least in North America).

However, the pattern attribute has no effect on validation—if a user enters “5” in the field, it is accepted.

The form is at Temp, and I’ve attached the JSON of it below.

{“content”:[{“id”:“cfuyon”,“name”:“form”,“parent”:“lkdxgn”,“children”:,“settings”:{“fields”:[{“type”:“checkbox”,“id”:“pqmsln”,“options”:“Career prospects\nFunding options\nTuition costs\nStart dates”,“label”:“I’m interested in:”,“name”:“mx_I_Want_Answers”,“required”:true},{“type”:“select”,“label”:“Location near you”,“id”:“fubcgk”,“options”:“All”,“placeholder”:“Select”,“name”:“mx_Campus_of_Choice”,“required”:true},{“type”:“select”,“label”:“Program of interest”,“id”:“dlaune”,“placeholder”:“Select”,“options”:“All”,“name”:“mx_Field_of_Choice”,“required”:true},{“type”:“text”,“label”:“First Name”,“id”:“c05758”,“required”:true,“placeholder”:“Brandon”,“name”:“firstname”,“autocomplete”:“given-name”},{“type”:“text”,“label”:“Middle Name”,“id”:“uvbyht”,“placeholder”:“Bob”,“required”:true,“name”:“middlename”,“autocomplete”:“family-name”,“isHoneypot”:true},{“type”:“text”,“label”:“Last Name”,“id”:“dufdxy”,“placeholder”:“Walker”,“required”:true,“name”:“lastname”,“autocomplete”:“family-name”},{“type":“email”,“label”:“Email”,“placeholder”:"brandonwalker@gmail.com”,“required”:true,“id”:“8611f3”,“name”:“email”,“autocomplete”:“email”},{“type”:“tel”,“label”:“Phone”,“placeholder”:“555-123-4567”,“id”:“ezkubu”,“required”:true,“autocomplete”:“tel”,“name”:“phone”,“title”:“Enter your phone number in this format: ###-###-####”,“errorMessage”:“Enter your phone number in this format: ###-###-####”,“pattern”:“^\d{3}-\d{3}-\d{4}$”},{“type”:“radio”,“label”:“Have you earned your high school diploma or GED?”,“id”:“wgdtku”,“options”:“No:Yes\nYes:No”,“name”:“hs_input”,“valueLabelOptions”:true,“required”:true},{“type”:“checkbox”,“id”:“keaaji”,“options”:“I understand and agree”,“label”:“I agree to receive communications from {acf_linked_brand} via email, phone, and text message (including automated technology) regarding programs and services. I understand consent is not required to purchase.”,“required”:true,“name”:“mx_Consent_given”,“errorMessage”:“You must click "I understand and agree"”},{“type”:“hidden”,“label”:“mx_Device_Type “,“id”:“zslzmj”,“name”:“mx_Device_Type”,“value”:”{echo:get_device_info_string}”},{“type”:“hidden”,“label”:“mx_Source_IP”,“id”:“ypitiq”,“name”:“mx_Source_IP”,“value”:“{echo:get_ip_address}”},{“type”:“hidden”,“label”:“mx_Converter”,“id”:“dwhfjt”,“name”:“mx_Converter”,“value”:“{acf_linked_brand:plain}”},{“type”:“hidden”,“label”:“mx_School_Name”,“id”:“ybmiqc”,“name”:“mx_School_Name”,“value”:“{acf_linked_brand:plain}”},{“type”:“hidden”,“label”:“gclid”,“id”:“qakhzq”,“value”:“{echo:get_url_param(‘gclid’)}”,“name”:“gclid”},{“type”:“hidden”,“label”:“mx_New_Source”,“id”:“zttwub”,“value”:“{echo:get_url_param(‘mx_New_Source’,‘PPC’)}”,“name”:“mx_New_Source”},{“type”:“hidden”,“label”:“mx_New_Sub_Source”,“id”:“rrxbvp”,“value”:“{echo:get_url_param(‘mx_New_Sub_Source’,‘Google Adwords’)}”,“name”:“mx_New_Sub_Source”},{“type”:“hidden”,“label”:“Address”,“id”:“mmehrr”,“name”:“mx_Bot_Check”},{“type”:“hidden”,“label”:“mx_Consent_version”,“id”:“zabamr”,“name”:“mx_Consent_version”,“value”:“TCPA_lp_v1_2026-05”},{“type”:“hidden”,“label”:“ntwk”,“id”:“tpcvne”,“value”:“{echo:get_url_param(‘ntwk’)}”,“name”:“ntwk”},{“type”:“hidden”,“label”:“kw”,“id”:“fhumeh”,“value”:“{echo:get_url_param(‘kw’)}”,“name”:“kw”},{“type”:“hidden”,“label”:“utm_campaign”,“id”:“rfshfo”,“value”:“{echo:get_url_param(‘utm_campaign’)}”,“name”:“utm_campaign”},{“type”:“hidden”,“label”:“utm_content”,“id”:“vradep”,“value”:“{echo:get_url_param(‘utm_content’)}”,“name”:“utm_content”},{“type”:“hidden”,“label”:“utm_id”,“id”:“ctfzkx”,“value”:“{echo:get_url_param(‘utm_id’)}”,“name”:“utm_id”},{“type”:“hidden”,“label”:“utm_source”,“id”:“vilufp”,“value”:“{echo:get_url_param(‘utm_source’)}”,“name”:“utm_source”},{“type”:“hidden”,“label”:“utm_term”,“id”:“jygqyn”,“value”:“{echo:get_url_param(‘utm_term’)}”,“name”:“utm_term”},{“type”:“hidden”,“label”:“utm_medium”,“id”:“tzdxuj”,“value”:“{echo:get_url_param(‘utm_medium’)}”,“name”:“utm_medium”},{“type”:“hidden”,“label”:“cpgn”,“id”:“gdgzat”,“value”:“{echo:get_url_param(‘cpgn’)}”,“name”:“cpgn”},{“type”:“hidden”,“label”:“crtv”,“id”:“dnogcm”,“value”:“{echo:get_url_param(‘crtv’)}”,“name”:“crtv”},{“type”:“hidden”,“label”:“adg”,“id”:“pxvuud”,“value”:“{echo:get_url_param(‘adg’)}”,“name”:“adg”},{“type”:“hidden”,“label”:“gbraid”,“id”:“aqpmni”,“value”:“{echo:get_url_param(‘gbraid’)}”,“name”:“gbraid”},{“type”:“hidden”,“label”:“wbraid”,“id”:“tvzpqf”,“value”:“{echo:get_url_param(‘wbraid’)}”,“name”:“wbraid”},{“type”:“hidden”,“label”:“lead_src”,“id”:“rykffm”,“value”:“{echo:get_url_param(‘lead_src’)}”,“name”:“lead_src”},{“type”:“hidden”,“label”:“plm”,“id”:“owschs”,“value”:“{echo:get_url_param(‘plm’)}”,“name”:“plm”},{“type”:“hidden”,“label”:“fbclid”,“id”:“jzdwud”,“value”:“{echo:get_url_param(‘fbclid’)}”,“name”:“fbclid”},{“type”:“hidden”,“label”:“msclkid”,“id”:“iiwimo”,“value”:“{echo:get_url_param(‘msclkid’)}”,“name”:“msclkid”},{“type”:“hidden”,“label”:“ttclid”,“id”:“oocrud”,“value”:“{echo:get_url_param(‘ttclid’)}”,“name”:“ttclid”},{“type”:“hidden”,“label”:“loc_phyiscal_ms”,“id”:“xgsqko”,“value”:“{echo:get_url_param(‘loc_phyiscal_ms’)}”,“name”:“loc_phyiscal_ms”},{“type”:“hidden”,“label”:“mx_Referring_Website”,“id”:“uvbmdx”,“value”:“{echo:get_current_url}”,“name”:“mx_Referring_Website”},{“type”:“hidden”,“label”:“brand_inquiry”,“placeholder”:“Your Name”,“id”:“ecfunf”,“value”:“brand_inquiry”}],“submitButtonStyle”:“primary”,“emailSubject”:“Contact form request”,“emailTo”:“admin_email”,“fromName”:“Intellitec”,“emailErrorMessage”:“Submission failed. Please reload the page and try to submit the form again.”,“htmlEmail”:true,“mailchimpPendingMessage”:“Please check your email to confirm your subscription.”,“mailchimpErrorMessage”:“Sorry, but we could not subscribe you.”,“sendgridErrorMessage”:“Sorry, but we could not subscribe you.”,“showLabels”:true,“requiredAsterisk”:true,“submitButtonSize”:“md”,“submitButtonText”:“Get Program Details Now!”,“submitButtonMargin”:{“top”:“2rem”},“validateAllFieldsOnSubmit”:true,“noticeCloseButton”:true,“noticeCloseAfter”:“5000”,“labelTypography”:{“text-transform”:“none”},“successMessage”:“Sending message…”,“submissionFormName”:“Lead gen form”,“disableRequiredAsteriskInPlaceholder”:true,“actions”:[“webhook”],“webhooks”:[{“id”:“uolyjw”,“name”:“Test”,“url”:“https://webhook.site/c20a9acf-9982-4834-9c89-52016137b691"}],“disableBrowserValidation”:true},“label”:"Lead gen form”}],“source”:“bricksCopiedElements”,“sourceUrl”:“https://intellitec.online”,“version”:“2.3.9”}

[timmse]

Hi Eric,
Thanks for your report!

The pattern validation in the Form element uses native browser validation. In the form JSON you shared, Don’t use browser validation is enabled, which adds novalidate to the form and prevents the browser from enforcing the pattern attribute.

Disable Form > Fields > Don’t use browser validation and retest. With browser validation enabled, this pattern should reject 5 for that phone field.

We are adding this rather important note to the Academy article.

[ainom]

I see. Yes, that would be good information to include in Academy.

The reason I had “Don’t use browser validation” enabled is because validation doesn’t work when it’s disabled. That is, if you try to submit with any fields still invalid, nothing happens.

I don’t usually use Bricks native form element because I’ve always had issues with it in the past (I typically use WS Form)…I guess this is an example of why. However in this case, Broicks forms made more sense.

This page has the same form with “Don’t use browser validation” disabled so you can see how it doesn’t work: Temp

[timmse]

What exactly isn’t working with the form? Assuming I fill it out correctly, I can submit it without any problems. You should have received an email from Hans Maulwurf

Assuming I don’t fill it out correctly and try to send it:

[ainom]

Here’s what doesn’t work:

• If I try to submit without filling in any fields, it doesn’t show any validation errors.
• If I select a value for the first set of checkboxes, it then does show a validation error for the next field (“Location near you” select field).
• Continuing to attempt submission without filling in other fields will show a validation error for every field, except for the radio buttons and the final checkbox.

So I guess the problem is that validation doesn’t work for radio buttons and checkboxes.

Here’s a screencast showing what I described above: Dropbox

[timmse]

Thanks for the details! I can see the issues in your form, but can’t replicate them on my local site with 2.4 beta 2.

So please test again with 2.4 beta 2, provide us with the form (remember to paste it in a way that allows us to copy/paste it) or send login credentials

[ainom]

I sent the admin login credentials via email.

[timmse]

Thanks for the login credentials! The problem was caused by your custom checkbox and radio styles.

.form-group ul.options-wrapper li input[type="checkbox"],
.form-group ul.options-wrapper li input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

This is breaking the validation because the required checkbox/radio controls are being reduced to a zero-size invisible target. Bricks/browser validation then has invalid controls it cannot meaningfully focus or report against.

Replace it with a non-zero hidden input (which I already did), preferably positioned under the fake control:

.form-group ul.options-wrapper li input[type="checkbox"],
.form-group ul.options-wrapper li input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

[ainom]

Thanks, that was it.