In my form, I am trying to implement validation for checkboxes using Alpine.js.
When I fill out the form correctly (when the validation passes without displaying any error messages), the result of $request->all()
returns an array containing values of 1 for checked fields and 0 for unchecked ones:
"myown" => "0"
"manager" => "1"
"supervisor" => "1"
"planningoutbound" => "0"
However, when the checkbox validation is triggered—meaning, for example, the ‘myown’ checkbox is checked along with another checkbox or none of the checkboxes are checked—it displays an error (indicating that the validation works correctly). The problem arises when I then re-check the checkboxes correctly and submit the form; the values for the checked checkboxes turn into null, while the unchecked fields still return a value of 0.
"myown" => "0"
"manager" => null
"supervisor" => null
planningoutbound" => "0"
a snippet of my form code:
<div x-data="addTask" class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<form action="{{ route('action.list.store') }}" method="post" x-ref="myForm" @submit.prevent="submitFormAddNewTask()">
@csrf
<div class="mb-3">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<div class="mb-3">
<h5>Task for</h5>
@php
$grupsChunks = $userGroups->chunk(4);
@endphp
<div class="flex flex-row">
@foreach ($grupsChunks[0] as $group )
<div class="mr-5">
<input type="hidden" name="{{ $group->name }}" value="0" :value="selectedCheckboxes.{{ $group->name }} ? 1 : 0" />
<input type="checkbox" name="{{ $group->name }}" class="form-checkbox text-success peer" id="{{ $group->name }}" x-model="selectedCheckboxes.{{ $group->name }}" value="1" @change="selectedCheckboxes.{{ $group->name }} = $event.target.checked ? 1 : 0"/>
<label class="text-sm peer-checked:text-success" for="{{ $group->name }}">{{ ucfirst($group->name) }}</label>
</div>
@endforeach
</div>
@isset($grupsChunks[1])
<div class="flex flex-row">
@foreach ($grupsChunks[1] as $group )
<div class="mr-5">
<input type="hidden" name="{{ $group->name }}" value="0" :value="selectedCheckboxes.{{ $group->name }} ? 1 : 0" />
<input type="checkbox" name="{{ $group->name }}" class="form-checkbox text-success peer" id="{{ $group->name }}" x-model="selectedCheckboxes.{{ $group->name }}" value="1" @change="selectedCheckboxes.{{ $group->name }} = $event.target.checked ? 1 : 0"/>
<label class="text-sm peer-checked:text-success" for="{{ $group->name }}">{{ ucfirst($group->name) }}</label>
</div>
@endforeach
</div>
@endisset
<template x-if="isSubmitForm1">
<p class="text-danger mt-1 text-xs" x-text="validateCheckboxes(selectedCheckboxes)"></p>
</template>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="submit" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
</div>
</form>
</div>
code snippet of my .js file:
document.addEventListener("alpine:init", () => {
/*
Validate Add new task in Action List
*/
Alpine.data("addTask", () => ({
selectedCheckboxes: {},
isSubmitForm1: false,
validateCheckboxes(selectedCheckboxes){
Object.keys(selectedCheckboxes).forEach(group => {
selectedCheckboxes[group] = selectedCheckboxes[group] ? 1 : 0;
});
const selectedGroups = Object.keys(selectedCheckboxes).filter(group => selectedCheckboxes[group] === 1);
const myownSelected = selectedGroups.includes('myown');
const otherSelected = selectedGroups.filter(group => group !== 'myown').length > 0
if(myownSelected && otherSelected){
return 'You cannot select "myown" with other groups'
} else if(!myownSelected && !otherSelected){
return 'Please select at least one group'
}
return ''
},
submitFormAddNewTask() {
if(this.validateCheckboxes(this.selectedCheckboxes)){
this.isSubmitForm1 = true;
console.log('Not ok')
return false
}
console.log('ok');
this.$refs.myForm.submit()
},
}))
});
I don’t understand why this is happening and how to resolve this issue.