Form + wizard pages doesn't work well with required fileds

I can't duplicate the issue please document the steps required to reproduce the problem, using the 'Example: Wizard' (/form/example-wizard)

I could not replicate this issue using Example: Wizard. There are two form validations happening, for all fields that have html5 validation they will pop an error on the page (text fields) and for those fields that don't (radios) they are caught by the server side val which pops the red error above the form. To test the form redirection, I had to add a radio button to step 2 but when the form failed I was not redirected to step1.

Attached is the devel > export form and a screenshot of the error on step 2.

I am testing on 8.x-1.x commit 83f20a7.

In the form's settings there is an option to 'Disable client-side validation'

Something is definitely wrong with radio button required validation.

Below animation shows the first and last name being deleted when the required radio buttons are not set.

Great, I will test my form with my module disabled and look into making a smaller POC of the bug. I will have my results up by 5pm EST.

I think the attached patch might solve the problem.

This fix worked for me, thanks!

Hi guys,

I applied this patch, and I'm still having an issue with a form with radio buttons on it. The radio buttons are a simple Yes/No, and set as a required field.

If I try and submit the form without selecting an option, the form reloads, without submission or errors.

Anyone have any ideas on where I should be setting breakpoints, either in JS or PHP code? Thanks!

Patch has been applied. Please try the latest beta or dev release.

jrockowitz, thanks. I've just installed beta21, and now I'm seeing the following on the forms I created: I looked over the config, and I don't see where these would be disabled?

I just tried with 8.1.x-dev, and now, I get a similar message, but only about a single field, in my case: "Upload document is a Managed file element, which has been disabled and will not be rendered."

You probably need to enable public files and the managed file element via the admin settings (/admin/structure/yamlform/settings).

jrockowitz, thank you, that sorted that issue. Although, after updating to the 8.1.x-dev, I'm still having an issue with submitting a form with radio buttons, that does not have a default value set, and is a required field. The form page just reloads without error.

Any ideas here?

I updated the Example: Wizard form (/form/example-wizard) and required both radio elements and the required validation is working fine.

I then removed paging from the same Example: Wizard form and required validation is still working as expected.

Can you provide me with step-by-step example?

Feel free to export and upload the form. (https://www.youtube.com/watch?v=ejzx4D0ldl0)

Hi jrockowitz,

Interesting, just creating a new form, and adding a Yes/No radio button element, as a required field, and I run in to this issue.

I'm going to get stuck in with a debugger tonight, but thought I'd drop form config in here in the event that is helpful in tracking this down.

langcode: en
status: true
dependencies: {  }
uid: 1
template: false
id: request_a_quote
title: 'Request a quote'
description: ''
elements: "basic_info:\n  '#type': fieldset\n  '#title': 'Basic info'\n  '#title_display': invisible\n  type_of_enquiry:\n    '#type': select\n    '#title': 'Type of enquiry'\n    '#options':\n      strategy: 'Strategy & Planning'\n      design: 'Design & User Experience'\n      development: 'Drupal Development'\n      ecommerce: 'Drupal E-commerce'\n      support: 'Drupal Support'\n      migration: 'Drupal Migration'\n      security: 'Drupal Security'\n      training: 'Drupal Training'\n    '#required': true\n    '#format': ol\n  name:\n    '#type': textfield\n    '#title': 'First Name'\n    '#required': true\n  last_name:\n    '#type': textfield\n    '#title': 'Last Name'\n    '#required': true\n  organization:\n    '#type': textfield\n    '#title': Organization\n  email:\n    '#type': email\n    '#title': Email\n    '#required': true\n  phone_number:\n    '#type': number\n    '#title': 'Phone number'\n    '#required': true\ndata:\n  '#type': fieldset\n  '#title': Data\n  '#title_display': invisible\n  inquiry_project_details:\n    '#type': textarea\n    '#title': 'Inquiry / Project Details'\n    '#required': true\n  upload_document:\n    '#type': managed_file\n    '#title': 'Upload document'\n  would_you_like_to_stay_informed_about_north_studio_via_email_you:\n    '#type': radios\n    '#title': 'Would you like to stay informed about North Studio via email? You can unsubscribe at any time.'\n    '#options':\n      'yes': 'Yes'\n      'no': 'No'\n    '#required': true\n"
settings:
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  form_submit_label: ''
  form_exception_message: ''
  form_closed_message: ''
  form_confidential: false
  form_confidential_message: ''
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_novalidate: false
  form_autofocus: false
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_next_button_label: ''
  wizard_prev_button_label: ''
  wizard_start_label: ''
  wizard_complete: true
  wizard_complete_label: ''
  preview: 0
  preview_next_button_label: ''
  preview_prev_button_label: ''
  preview_message: ''
  draft: false
  draft_auto_save: false
  draft_button_label: ''
  draft_saved_message: ''
  draft_loaded_message: ''
  confirmation_type: page
  confirmation_message: ''
  confirmation_url: ''
  limit_total: null
  limit_total_message: ''
  limit_user: null
  limit_user_message: ''
  entity_limit_total: null
  entity_limit_user: null
  results_disabled: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
  view_any:
    roles: {  }
    users: {  }
  update_any:
    roles: {  }
    users: {  }
  delete_any:
    roles: {  }
    users: {  }
  purge_any:
    roles: {  }
    users: {  }
  view_own:
    roles: {  }
    users: {  }
  update_own:
    roles: {  }
    users: {  }
  delete_own:
    roles: {  }
    users: {  }
handlers:
  email_confirmation:
    id: email
    label: 'Email confirmation'
    handler_id: email_confirmation
    status: true
    weight: 0
    settings:
      to_mail: '[yamlform-submission:values:email:raw]'
      cc_mail: ''
      bcc_mail: ''
      from_mail: default
      from_name: default
      subject: default
      body: default
      excluded_elements: {  }
      html: true
      attachments: false
      debug: false
  email_notification:
    id: email
    label: 'Email notification'
    handler_id: email_notification
    status: true
    weight: 1
    settings:
      to_mail: info@northstudio.com
      cc_mail: ''
      bcc_mail: ''
      from_mail: '[yamlform-submission:values:email:raw]'
      from_name: '[yamlform-submission:values:name:value]'
      subject: default
      body: default
      excluded_elements: {  }
      html: true
      attachments: false
      debug: false

Thanks very much for your input so far!

The form is working as expected for me.

Below is a screenshot of the Yes/No radios displaying a required error message.

Can you please document the steps needed to reproduce this issue?