jquery - Validation of the dynamic input field in laravel

Question

I have a table where the row can be dynamically added and user able to submit the file for any row. I have a question here is how can I validate the file input?

I am using jquery to dynamically add / remove the row:

                            var row = 

                            "<tr> <input type='hidden' name='Registration_Tag[]'' value='" + Registration_Tag + "'>" +
                            "<td class='px-6 py-4 whitespace-nowrap'>" +
                            "<div class='flex items-center'>"+
                            "<div class='ml-4'>"+
                            "<div class='text-sm font-medium text-gray-900'>"+
                            Equipment_Name+
                            "</div>"+
                            "</div>"+
                            "</div>"+
                            "</td>"+
                            "<td class='px-6 py-4 whitespace-nowrap'>"+
                            "<div class='text-sm text-gray-500'>"+
                            Registration_Tag+
                            "</div>"+
                            "</td>"+
                            "<td class='px-6 py-4 whitespace-nowrap'>"+
                            "<span"+
                            "class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'>"+
                            Equipment_Status+
                            "</span>"+
                            "</td>"+
                            "<td class='py-4 whitespace-nowrap text-sm text-gray-500'>"+

                            "<div class='flex flex-wrap my-auto mb-6'>"+
                            "<div class='w-full px-3'>"+
                            "<input id='grid-password' type='file' placeholder='' name='Equipment_Cert[]'>"+
                            " <small class='text-danger'>{{ $errors->first('Equipment_Cert') }}</small>"+
                            "</div>"+
                            "</div>"+
                            "</td>"+
                            "<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>"+
                            "<button type='button' class='remove-tr close'>"+
                            "<span aria-hidden='true'>&times;</span>"+
                            "</button>"+
                            "</td>"+
                            "</tr>"

                            $("#Calibration_Table").append(row);

I have tried dot notation like below but still no use for me.

                    $v = Validator::make($request->all(), [
                        'Calibration_Location'=>'required',
                            'Calibration_Category'=>'required',
                            'Date_of_Calibration' => 'required',
                            'Next_Due_Date' => 'required',
                            'Equipment_Cert.*' => 'required'
                        ]);
                    if ($v->fails()) {
                        return redirect('/Equipments/create?request_type=Update+Calibration+for+All+Category')
                                    ->withErrors($v->errors())
                                    ->withInput();
                    }

Hope can receive some advice from you. Thanks in advance

Answer 1

File upload inputs are handled a little differently in a Laravel request than other types of inputs. For example, a text input when empty will still be present in $request->input(). On the other hand, an empty file input is not set in $request->input() or $request->file().

Your sample rule, 'Equipment_Cert.*' => 'required' means "for every field in the Equipment_Cert array on this request, it should have a value". But because empty file inputs are stripped from the request, there is no Equipment_Cert array, so there are no elements in that array for this rule to be applied to.

If you want to make sure that there is a file element uploaded for every row in your dynamic form, you could do something like this:

// I picked this field to count because it's a text input in your dynamic row
$dynamicRowCount = is_array($this->input('Registration_Tag')) ? count($this->input('Registration_Tag')) : 0;

$v = Validator::make($request->all(), [
    'Calibration_Location'=>'required',
    'Calibration_Category'=>'required',
    'Date_of_Calibration' => 'required',
    'Next_Due_Date' => 'required',
    'Equipment_Cert' => [
        'required',
        'array',
        "size:$dynamicRowCount",
    ],
    
    // you can still do further validation on each file if necessary
    'Equipment_Cert.*' => [
        'file',
        'size:4096',
        'mimes:pdf,docx',
    ],
]);

With this rule, you'll get an error like The equipment cert must contain 3 items assuming there were 3 rows on the dynamic form. And if you wanted, you could further customize this message to something a little nicer, like Each equipment row requires an uploaded certificate.

Or, if you're able to change your HTML form structure, you could make each dynamic row in your form it's own array. Name your fields something like equipment[][name] and equipment[][certificate] and then your rules could be closer to what you originally tried:

[
    'equipment.*.name' => 'required',
    'equipment.*.certificate' => 'required',
]