Grav: Checkbox not working

[joville]

Description can be found there: https://getgrav.org/forum#!/general:checkbox-form-field-on-modu

[rhukster]

copied forum post here for clarity:

I have got a frontend form working, but adding a checkbox field throws validate errors on the first two required fields, removing the checkbox field lets work again like a charm. Using a radion button field does work instead, but not a checkbox (Grav v1.1.0-rc.3).

• name: confirmation
  label: ‘I want to get a confirmation’
  type: checkbox

[w00fz]

I don't understand, is this a problem on frontend or backend?
On frontend we aren't using any JS for forms, the validation is purely from the form plugin.

[joville]

It have been on the Frontend! I have tried to get a checkbox into the form, which was not validating right. I had a form with three text inputs, one textarea and then a checkbox. Filling in the form, and using recaptcha should send a mail. I was always getting validation errors for the first text fild. I have then changed the checkbox to a radio button to get the form work. Checkbox did never work!

[flaviocopes]

Can you paste the whole form definition, so I can try it?

[joville]

---
title: Home
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _teaser
            - _event
            - _program
            - _sessions
            - _registration
body_classes: home
onpage_menu: true

form:
    action: /
    name: registration

    fields:
        - name: name
          label: Name
          placeholder: Your name
          autofocus: on
          autocomplete: on
          type: text
          validate:
            required: true

        - name: email
          label: E-Mail
          placeholder: Your e-mail-adress
          type: email
          validate:
            required: true

        - name: organisation
          label: Name of your institution/organization/company (optional)
          placeholder: Institution/Organization/Company 
          type: text

        - name: sessionsubject
          label: Sessiontheme (optional)
          placeholder: Your Sessionsubject
          type: text

        - name: sessiondescription
          label: Beschreibung des Sessionthemas (freiwillig)
          placeholder: Beschreibung der Session
          type: textarea

        //That did not work, getting validation errors from the first two fields! But using type: radio there, it does work!
        - type: checkbox
          label: You want to get a confirmation for attending?
          validate:
            required: true

        - name: g-recaptcha-response
          label: ReCaptcha
          type: captcha
          recatpcha_site_key:
          recaptcha_not_validated: 'Antispam not valid!'
          validate:
            required: true

    buttons:
        - type: submit
          value: Send

    process:
        - captcha:
            recatpcha_secret:
        - email:
            from: "{{ config.plugins.email.from }}"
            to: "{{ form.value.email|e }}"
            bcc: "{{ config.plugins.email.to }}"
            subject: "[Sign] {{ form.value.name|e }}"
            body: "{% include 'forms/data2.html.twig' %}"
        - save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
        - message: Thank you! :)
        - display: /thankyou
---

[flaviocopes]

I tried and I don't see any problem with it. Which browser are you using?

Can you make a short video of what is happening?

[joville]

Firefox

[joville]

Will do it again and you show the result in the next days!

[w00fz]

I'm also unable to reproduce this.

[joville]

There you have the screenshot of the validation errors I am getting with checkbox.

[joville]

And this missing required fields I am getting after filling the form correctly. That is only happening with type: checkbox, but type: radio does work.

[joville]

FYI, even after updating the system to the last releases the checkbox is still throwing errors.

[w00fz]

I just realized that in your YAML the checkbox field doesn't have a name.
You have:

- type: checkbox
  label: You want to get a confirmation for attending?
  validate:
    required: true

Should be something like:

- name: confirmation
  type: checkbox
  label: You want to get a confirmation for attending?
  validate:
    required: true

Can you try changing that?

[joville]

Even with name: confirmation I get the same validation errors as shown in the screenshot!

[w00fz]

I can't reproduce with antimatter. PM me on Gitter your user folder and I'll try with your same setup.

[w00fz]

Thanks for the user folder, I was able to reproduce this now. This is a form plugin issue with backward incompatibility.

I have now fixed it with https://github.com/getgrav/grav-plugin-form/commit/83f34d401a1952dfb4dd97f2c0d229c71ca56fc0

Can you try applying the change and confirm that works?

Also please next time open the issue in the proper repository, that way we can keep things more organized.

Thanks!

[joville]

Yes, getgrav/grav-plugin-form@83f34d4 does work now! Thanks!

[w00fz]

Awesome 👍

[tdulieu]

Thank you, commit #83f34d4 solved the form validation problem I was trying to fix for two days (missing required fields while they were correctly filled) :+1:

[flaviocopes]

Doing a point release now, which includes that fix

[manuel-84]

Seems that checkbox with validation required is not working

[matepaiva]

Can confirm that it is not working.

[rhukster]

I can't replicate this.

I have this form:

---
title: Checkboxes
form:
    name: issue-form
    client_side_validation: false
    fields:
        checkboxes:
            label: Checkboxes
            default:
                - option-a
            type: checkboxes
            options:
                option-a: 'Option A'
                option-b: 'Option B'
                option-c: 'Option C'
            validate:
                required: true
                min: 2
                message: 'Pick at least 2'
        accept_rules:
            label: 'Accept rules'
            type: checkbox
            validate:
                required: true
                message: 'Please accept the rules to send'
    buttons:
        -
            type: submit
            value: Send
    process:
        -
            message: 'Thank you!'
---

# GitHub Form Issues