Error 'form[fieldName] : <fieldName> is invalid' while submitting multiple checkboxes

Question

I have a form with multiple checkboxes in it. However, when submitting the form it returns an error like this:

{"success":false,"errors":{"formDate":["Date is invalid."]}}

template:

<input type="hidden" name="fields[formDate]" value="">

<label>{{ 'Select your date(s):' | t }}</label>
{% for date in dateList.options %}
    <label><input :class="{ error: error['formDate'] }" type="checkbox" name="fields[formDate] []" value="{{ date.value }}">{{ date.label | t }}</label>
{% endfor %}

I'm using Vue component to serialise the form. Checkbox field is posted as the array of checked values.

While searching the documentation I found only how to display the checkbox on the template. Probably the error is connected with the format of values passed through the AJAX call. Does anyone know the acceptable value format for the checkbox with multiple values?

Answer 1

I'm not sure if it can make a difference, but you should try to remove the white space between the two array in the name attribute.

Then I think you may have to format the date value with the date filter.

<label>
    <input :class="{ error: error['formDate'] }" type="checkbox" name="fields[formDate][]" value="{{ date.value|date('Y-m-d') }}">{{ date.label|t }}
</label>