Google invisible recaptcha doesn't work with form file fields

30/07/2018


I have a form in my drupal project which has a managed_file field. It worked perfectly until I added invisible recaptcha for the forms. The file is getting uploaded but when I submit the form the windows gets refreshed with all the elements without doing anything.

Form Fields

$form['fileLoad'] = [
    '#type'              => 'managed_file',
    '#name'              => 'fileLoad',
    '#title'             => t(''),
    '#size'              => 20,
    '#description'       => t('Word/Excel/PDF/JPG/PNG formats supported'),
    '#upload_location'   => 's3://forms/contactus',
    '#upload_validators' => [
        'file_validate_extensions' => ['pdf doc docx xlsx jpg png'],
    ],
    '#attributes'        => [
        'id'    => 'fileLoad',
        'class' => ['form-control'],
    ],
    '#required'          => false,
];

$form['submit'] = [
    '#type'       => 'submit',
    '#value'      => t('submit'),
    '#attributes'   => [
        'id'            => 'validateBtn',
        'data-sitekey'  => "##MYSITEKEY##",
        'data-callback' => "onSubmit",
        'class'         => ['g-recaptcha', 'cus-btn-book-now'],
    ],
    '#validated'  => true,
];

Invisible recaptcha script

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
   function onSubmit(token) {
       document.getElementById('contact_us_form').submit();
   }
</script>

The form works perfectly

  • With the managed_file field, without invisible recaptcha (works perfectly with recaptcha V2)
  • Without managed_file field with the invisible recaptcha

I guess the form doesn’t work when both the invisible recaptcha and managed_file field present. What would be the solution?

قالب وردپرس