Form insists on redirecting after failure to validate

[nvandelden]

I added the custom anti-spam field provided by the Cookbook on a working form, however it gets redirected to the form route when selecting a wrong answer, instead of showing the validate message "Not quite, try that math again".

The FrontMatter of the form:

form:
    fields:
        name:
            type: text
            placeholder: Naam
            display_label: false
            classes: form50
            validate:
                required: true
        email:
            type: text
            placeholder: E-mailadres
            display_label: false
            classes: form50
            validate:
                type: email
                required: true
        subject:
            type: text
            placeholder: Onderwerp
            display_label: false
            classes: form100
            validate:
                required: true
        message:
            type: textarea
            placeholder: 'Jouw vraag of opmerking...'
            display_label: false
            validate:
                required: true
                min: 8
        personality:
            type: radio
            label: 'What is five times eight?'
            options:
                alaska: 32
                oklahoma: 40
                california: 48
            validate:
                required: true
                pattern: ^oklahoma$
                message: 'Not quite, try that math again.'
    buttons:
        submit:
            type: submit
            value: 'Verstuur bericht'
            classes: button-5
    process:
        email:
            from: '{{ config.plugins.email.from }}'
            from_name: '{{ form.value.name }}'
            to: '{{ config.plugins.email.to }}'
            reply_to: '{{ form.value.email }}'
            subject: '[Contactaanvraag] BusinessA'
            body: '<strong>Contactpersoon:</strong><br /> {{ form.value.name }}<br />{{ form.value.email }}<br />{{ form.value.subject }}<br /><br /><strong>Bericht:</strong><br />{{ form.value.message }}'
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
            operation: create
        redirect: /bedankt/contact

The form route in which the redirect is going to after failure of validate is: /form/contact The form is working correctly when selecting the right answer, it only seems a problem when selecting the wrong answer.

Versions (latest as of now):

• Grav: v1.6.22
• Form: v4.0.5
• Email: v3.0.7

Edit1: markup. Edit2: added version details

[nvandelden]

What I found out so far:

• Using {% include "forms/form.html.twig" with {form: forms( {route: '/form/contact'} )} %} the page will redirect to the route /form/contact after failing to validate with a blank page.
• Using {% include "forms/form.html.twig" with { form: forms('contact') } %} the page also redirect to /form/contact but now it's displaying the form + the correct validate message.
• If not using Displaying Forms from Twig, and using a form.md as main page md, the form is then showing the validate message correctly after the page reload without a redirect.

Removing redirect: /bedankt/contact from the FrontMatter does not matter for the above.

[nvandelden]

This bug also happens with Google reCAPTCHA.

[iamalexm]

I have the same issue with reCAPTCHA and ajax form.

Here is my form.md

form:
  name: ajax-contact-form
  action: "/contact"
  template: mail/form-messages
  refresh_prevention: true
  classes:
  fields:
    - name: name
      label: Nom
      placeholder: Entrez votre nom
      autofocus: on
      autocomplete: on
      type: text
      validate:
        required: true
      classes: no-border

    - name: email
      label: E-mail
      placeholder: Entrez votre e-mail
      type: email
      validate:
        required: true
      classes: no-border

    - name: message
      label: Message
      size: long
      placeholder: Entrez votre message
      type: textarea
      validate:
        required: true
      classes: no-border contact-message

    - name: g-recaptcha-response
      label: Captcha
      type: captcha   
      recaptcha_not_validated: 'Captcha not valid!'   

  buttons:
    - type: submit
      value: Envoyer

  process:
    - email:
        from: "{{ config.plugins.email.from }}"
        to:
          - "{{ form.value.email }}"
          - "{{ config.plugins.email.to }}"
        subject: "[Feedback] {{ form.value.name|e }}"
        body: "{% include 'forms/data.html.twig' %}"
    - save:
        fileprefix: feedback-
        dateformat: Ymd-His-u
        extension: txt
        body: "{% include 'forms/data.txt.twig' %}"
    - message: Merci pour votre message !
    - recaptcha: true

Here is my javascript

$(document).ready(function () {
  let form = $("#ajax-contact-form");
  form.submit(function (e) {
    // prevent form submission
    e.preventDefault();
    console.log("launch ajax submission");
    // submit the form via Ajax
    $.ajax({
      url: form.attr("action"),
      type: form.attr("method"),
      dataType: "html",
      data: form.serialize(),
      success: function (result) {
        // Inject the result in the HTML
        $("#form-result").html(result);
      },
    });
  });
});

And here is my form.yaml

enabled: true
built_in_css: true
inline_css: true
refresh_prevention: false
client_side_validation: true
inline_errors: false
files:
  multiple: false # To allow multiple files, default is single
  limit: 10 # Number of allowed files per field (multiple required)
  destination: "self@" # Where to upload the files (path and self@, page@, theme@)
  avoid_overwriting: false # Prevent files with the same name to be overridden. Date prefix will be added
  random_name: false # Generate a random 15 long string name for the uploaded files
  filesize: 0 # Maximum file size allowed (in MB)
  accept: # List of mime/types or file extensions allowed (ie, image/*,.zip,.mp4)
    - image/*
recaptcha:
  version: 3
  site_key: 6LcJrq4ZAAAAAxxx
  secret_key: 6LcJrq4ZAAAAAxxx

Am I missing something or the bug is still not fixed yet?

Form : v4.0.10 Grav : v1.7.0-rc.13

[nvandelden]

Hi iamalexm, this issue is not fixed yet.

[mjgwood]

I have the same issue with reCAPTCHA (both v2 and v3), but failed validation of regular form fields are not a problem if I remove reCAPTCHA from the form. Is there any other way to implement reCAPTCHA with a modular page form that circumvents this issue?

I'm also using Form v4.0.10.