jquery – Elementor form – checkboxes validation

Question

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?

0
vsapountzis 1 week 2022-11-22T02:41:09-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse