Grav contact form validation with recaptcha and jquery.validate.js

blueprint-on-page.yml

form:
    action: /
    name: contact-form
    classes: contact-form
    template: form-messages
    referesh_prevention: true
    fields:
        -
            name: name
            label: Nombre
            placeholder: Nombre
            type: text
            validate:
                required: true
        -
            name: email
            label: Email
            placeholder: Email
            type: email
            validate:
                required: true
        -
            name: phone
            label: Teléfono
            placeholder: Teléfono
            type: text
            validate:
                required: true
        -
            name: message
            label: Mensaje
            placeholder: Mensaje
            type: textarea
        -
            name: agree_to_terms
            markdown: true
            label: 'Acepto los terminos del [Aviso legal](/aviso-legal)'
            type: checkbox
            validate:
                required: true
        -
            name: g-recaptcha-response
            label: Captcha
            type: captcha
            recaptcha_site_key: xxxx
            recaptcha_not_validated: 'Captcha no válido'
            validate:
                required: true
        -
            name: web
            type: honeypot
        -
            name: paraosos
            type: honeypot
    buttons:
        submit:
            id: submit
            type: submit
            value: Enviar
    process:
        -
            captcha:
                recaptcha_secret: xxx
        -
            message: 'Muchas gracias {{ form.value.name }} por contactar conmigo. He recibido tu correo y me pondré en contacto contigo con la mayor rapidez posible. Te envio una copia del correo que me has enviado para que lo tengas como referencia. Si parece que no lo has recibido, revisa tu bandeja de correo no deseado.'
        -
            email:
                subject: 'Nueva solicitud de contacto desde la web'
                from: '{{ config.plugins.email.from }}'
                to:
                    - '{{ config.plugins.email.from }}'
                body: '<p>Nueva solicitud de contacto desde la web</p>{% include ''forms/data.html.twig'' %}'
        -
            email:
                subject: 'título de la web | mensaje de contacto'
                from: '{{ config.plugins.email.from }}'
                to:
                    - '{{ form.value.email }}'
                body: '<p>Muchas gracias por tu solicitud. Te responderé con la mayor rapidez posible.</p> <br><br> {% include ''forms/data.html.twig'' %}'

contact-form-validation-grav.js

(function () {
    $(function () {
        $('#contact-form').validate({
            rules: {
                'data[name]': 'required',
                'data[email]': {
                    required: true,
                    email: true
                },
                'data[phone]': 'required',
                'data[agree_to_terms]': 'required',
            },

            ignore: ':hidden:not(:checkbox)',

            errorPlacement: function (error, element) {
                if (element.is(":checkbox")) {
                    element.next().append(error)
                } else {
                    error.insertAfter(element);
                }
            },

            messages: {
                'data[name]': 'Por favor añade tu nombre.',
                'data[email]': 'Por favor añade un email válido.',
                'data[phone]': 'Por favor añade tu teléfono.',
                'data[agree_to_terms]': 'Por favor marca esta casilla.'
            },

            submitHandler: function (form) {
                if (grecaptcha.getResponse() === '') {
                    alert('Debes de rellenar el Captcha');
                    return false;
                }

                var $submitBtn = $('#submit');
                $submitBtn.attr('disabled', 'disabled');

                $('#form-result').html('<div class="loader">Enviando...</div>');

                $.ajax({
                    url: form.action,
                    type: form.method,
                    dataType: 'html',
                    data: $(form).serialize(),
                    success: function (result, status, jqXHR) {
                        $submitBtn.removeAttr('disabled');
                        $('#form-result').html(result);
                        $('#contact-form').trigger('reset');
                    }
                });

                return false;
            }
        });
    });

})();

contact.html.twig

<section class="contact" id="contacto">
    <h2>Contacta conmigo</h2>
    {% include "forms/form.html.twig" with { form: forms({route: '/'}) } %}
    <div id="form-result" class="form-result"></div>
</section>