Okay
  Public Ticket #2566254
Required Custom Checkbox on RSVP Form
Closed

Comments

  •  2
    Daniel started the conversation

    Hi,

    I'm trying to add a requried checkbox as a custom field to the RSVP form. This is to confirm that the user accepts the privacy policy of my site. If the checkbox is not checked, the user should not be able to complete the sign up process.

    How can I achieve this? Since this is not a "classic" PHP form, the "required" attribute for the checkbox doesn't work. Is there another way?

    Thanks.

  •  878
    Zhivko replied

    Hi,

    I've recently did such custom field for another client.

    Place the filter in your theme or child-theme functions.php file:

    add_action('wp_footer', function() {
        ?>
        <script type="text/javascript">
            (function ($) {
                $(function () {
                    if (!window.StecRsvpToEvent || !window.StecReminder) {
                        return;
                    }
                    const textHtml = '<p>I agree with the terms and conditions</p>';
                    /**
                     * RSVP extension
                     */
                    window.StecRsvpToEvent.prototype.popOpen = function () {
                        $('body').addClass('stec-modal-opened');
                        $('#stec-layout-event-inner-out-wrapper-' + this.settings.glob.options.id).hide();
                        $(this.popHtml()).appendTo('body');
                        $('<div class="stec-style-flexbox"><input type="checkbox" required="required" name="stec_gdpr_agree" />' + textHtml + '</div>').appendTo('.stec-rsvp-popup-wrapper-settings');
                    };
                    window.StecRsvpToEvent.prototype.popFieldsValid = function () {
                        var valid = true;
                        if ($.trim($('.stec-rsvp-popup-wrapper-settings input[name="name"]').val()) === '') {
                            valid = false;
                        }
                        if ($.trim($('.stec-rsvp-popup-wrapper-settings input[type="email"]').val()) === '') {
                            valid = false;
                        }
                        if (!$('.stec-rsvp-popup input[name="stec_gdpr_agree"]').is(':checked')) {
                            valid = false;
                        }
                        return valid;
                    };
                    /**
                     * Reminder extension
                     */
                    window.StecReminder.prototype.popOpen = function () {
                        $('body').addClass('stec-modal-opened');
                        $(this.popHtml()).appendTo('body');
                        $('<div class="stec-style-flexbox"><input type="checkbox" required="required" name="stec_gdpr_agree" />' + textHtml + '</div>').appendTo('.stec-reminder-popup-wrapper-settings');
                    };
                    window.StecReminder.prototype.popFieldsValid = function () {
                        var valid = true;
                        if ($.trim($('.stec-reminder-popup-wrapper-settings input[name="email"]').val()) === '') {
                            valid = false;
                        }
                        if ($.trim($('.stec-reminder-popup-wrapper-settings input[type="number"]').val()) === '') {
                            valid = false;
                        }
                        if (!$('.stec-reminder-popup input[name="stec_gdpr_agree"]').is(':checked')) {
                            valid = false;
                        }
                        return valid;
                    };
                });
            })(window.jQuery);
        </script>
        <?php
    });

    This also places I agree... field for the reminder popup.


    Stachethemes Developer

  •  2
    Daniel replied

    Thank you, this works great!