0

I am building a form with elementor pro. I noticed that the checkbox fields (not the acceptance) don't have a required setting/option, but I need to validate a specific groups of checkboxes, so I started my research and I am currently building a validator using jQuery:

function form_checkboxes_validation(){
?>
<script type="text/javascript">
(function($){
    $("#submit").click(function(){
            if(! $('#form_id input[type="checkbox"]').is(':checked')) {
        alert("Please check at least one.");
        return false;
        }
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'form_checkboxes_validation');

Atm, my script validates all the checkbox fields in the form, even when I used the specific element ID as a selector for the checkbox field. It seems that elementor changes the IDs of the checkboxes in the frontend.

enter image description here

So, for example if I set the "suite" checkboxes group ID as select_suite, then in the frontend I see form-field-select_suite-0

I want to validate only the "suite" checkboxes groups (image attached above), since this the only required field for this section of the form and I need for the submitter to at least have one checked from the suites group. The other two groups are not required.

Any suggestions on how to properly approach this?

2 Answers 2

2

For anyone interested, I was able to resolve it like so:

function form_checkboxes_validation(){
?>
    <script type="text/javascript">
    (function($){
       $("#send-request").click(function(){
        if(! $('input[name="form_fields[suite][]"]').is(':checked')) {
        alert("Please select at least one suite!");
        return false;
        }
    });
    })(jQuery);
    </script>
<?php
}
add_action('wp_footer', 'form_checkboxes_validation');
0

In case where somebody have trouble to add the same validation for multiple group of checkboxes here is the jquery code based on the above mentioned logic:

function n3_form_checkboxes_validation() { 
?>
<script type="text/javascript">
    (function($){
        $("#send-request").click(function(){
            var groups = $('.elementor-field-group.elementor-field-type-checkbox');
            var isValid = true;
            
            groups.each(function() {
                var checkboxes = $(this).find('input[type="checkbox"]');
                var isChecked = false;
                
                checkboxes.each(function() {
                    if ($(this).is(':checked')) {
                        isChecked = true;
                        return false; // Exit the loop if at least one checkbox is checked in this group
                    }
                });
                
                if (!isChecked) {
                    isValid = false;
                    return false; // Exit the loop if at least one group doesn't have a checked checkbox
                }
            });
            
            if (!isValid) {
                alert("Please check at least one checkbox in each group.");
                return false;
            }
        });
    })(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'n3_form_checkboxes_validation');

Certainly! Let's go through the code step by step:

The function n3_form_checkboxes_validation() is defined. This function will be hooked to the wp_footer action, which means it will be executed when the footer is generated.

Inside the function, an opening tag is added to start embedding JavaScript code.

Immediately after the opening tag, an immediately-invoked function expression (IIFE) is used to encapsulate the JavaScript code. This helps prevent any conflicts with other JavaScript code on the page.

The $ is used as a shorthand for the jQuery object. This is done to ensure compatibility with other libraries that might use the $ symbol.

The code adds a click event handler to the element with the ID "send-request". Change this ID to match the ID of the button you want to trigger the validation.

The event handler function is defined. Inside this function, the variable groups is assigned to all elements with the classes "elementor-field-group" and "elementor-field-type-checkbox". This selects all the checkbox groups you want to validate.

The variable isValid is initialized as true. This variable will be used to keep track of whether the validation passes or fails.

The .each() function is used to iterate over each checkbox group.

Within each group iteration, the variable checkboxes is assigned to all the checkboxes within that group using the find() method.

The variable isChecked is initialized as false. This variable will be used to determine if at least one checkbox is checked within the current group.

Another .each() function is used to iterate over each checkbox within the current group.

Inside the checkbox iteration, the code checks if the current checkbox is checked using the is(':checked') method.

If a checkbox is checked, the variable isChecked is set to true, and the loop is exited using return false. This ensures that only one checked checkbox is required within each group.

After the checkbox iteration, the code checks the value of isChecked. If it is still false, it means no checkbox was checked within the current group. In that case, the variable isValid is set to false, and the loop is exited using return false. This ensures that at least one checkbox is checked within each group.

After the group iteration, the code checks the value of isValid. If it is false, it means at least one group didn't have a checked checkbox. In this case, an alert is displayed to the user indicating that they need to check at least one checkbox in each group.

Finally, the function is closed with the closing tag.

Make sure to replace the ID "send-request" in the code with the actual ID of the button you want to trigger the validation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.