Elementor form checkbox validation (required)

Yes, Elementor don’t have option to make it the checkbox required. But if your using for “Acceptance” work like “I agree to terms and condition” like the you can use “Acceptance” one. For other work you can add this code website function file to make that field required. Make sure you took backup before do that action or do on Stage site. Better use Code Snippet or WPCode to add the code.

<?php 
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');

Another solution: https://github.com/elementor/elementor/issues/1693#issuecomment-1482443352

Hello,

Thank you for reaching out.

In Elementor forms, setting the checkbox field as required might not be as straightforward as with other fields, but you can achieve it with a little workaround. Here’s a step-by-step guide:

1. Add a Hidden Field: Add a hidden field to the form. This field will act as a validator for the checkbox.
2. Set Default Value for Hidden Field: Set a default value for the hidden field. This value will be used to check if the checkbox is selected.
3. Add Custom JavaScript:
   • Go to the form settings, and under the “Actions After Submit” section, add a custom JavaScript action.
   • In the custom JavaScript, you can use jQuery or vanilla JavaScript to check if the checkbox is selected. If it’s not selected, prevent the form submission and display an error message.

jQuery(document).ready(function($) {
    // Replace "your_checkbox_field" with the actual ID or class of your checkbox field
    if (!$('#your_checkbox_field').is(':checked')) {
        alert('Please check the checkbox before submitting the form.');
        return false; // Prevent form submission
    }
});

Save and Update.

This workaround essentially uses a hidden field to validate whether the checkbox is checked before allowing the form submission. Keep in mind that this method involves adding custom JavaScript, so make sure you’re comfortable with that.

Remember to replace “your_checkbox_field” with the actual ID or class of your checkbox field. If you’re not familiar with JavaScript or coding, you may want to seek assistance from a developer to implement this solution.

We are wishing you a pleasant day ahead.

Kind Regards,

• This reply was modified 10 months, 1 week ago by Joel.

Hello. We are closing this thread due to inactivity. Please feel free to open a new thread should you need further assistance.

Kind Regards,

Hi,

I faced this issue where I needed a lot checkbox groups on a multi-step form. so this solution is for anyone who is facing this issue on a multi-step form, it will work on the simple form as well.

.elementor-field-group-specialist_area_v {
	width: 5%;
}
#form-field-specialist_area_v {
    max-height: 0.6px !important;
    min-height: unset;
    padding: 0;
    border: none;
    background: #fff;
    margin-top: -50px;
    opacity: 0;
}

Here my checkbox field name is “specialist_area” and the hidded I field I created to validate it is named “specialist_area_v”.

After adding the above the CSS, add following jQuery code beneath the form in html module.

<script>
jQuery(document).ready(function($) {
    
//Specialist area checkbox validation
  $(".elementor-field-group-specialist_area").on("change", "input[type='checkbox']", function() {
    var checkedValues = $(".elementor-field-group-specialist_area input[type='checkbox']:checked").map(function() {
      return $(this).val();
    }).get().join(", ");
    
    $("#form-field-specialist_area_v").val(checkedValues);
  });
  
});
</script>

All you have to do is add a text field under the checkbox and replace the classes and IDs in the above CSS and JS and it’ll work as a validation for the checkbox groups.

Hi

I just realized that rather than using codes to get this fixed, it’s best to use the Acceptance type field.

Might come in handy to anyone need to find fix to the issue.

• This reply was modified 7 months, 3 weeks ago by jerrybarry.

@joelsm – I am no longer finding “Custom” as an option under “Actions After Submit.” Did this feature get removed? I’m using Elementor Pro – 3.22.1.

Same issue as @toddedelman. I can’t find where to add the custom javascript.

The hidden field validation part isn’t clear. What should the default value be? How is the check performed? Does this solution still work at all?

It seems like Elementor (@joelsm / @aracelil) have stopped replying to this thread…

• This reply was modified 2 months ago by 972 creative.