Validating dynamically added input fields in Laravel 5

Problem: Need to validate dynamically added input fields.

Here is a screenshot of the UI:

Scenario 1: Adding a new schedule, validation works perfectly.

The form is validated using a Form Request file:

public function rules()
{
    $rules = [
        'name' => 'required|max:255',
        'due_at' => 'required|date_format:Y-m-d',
        'users' => 'required',
        'task_name' => 'required|max:255'
    ];
    if($this->request->get('task_name')){
        foreach($this->request->get('task_name') as $key => $val)
        {
            $rules['task_name.'.$key] = 'required|max:255';
            $rules['task_description.'.$key] = 'required|max:255';
        }
    }

    return $rules;
}

public function messages()
{
    $messages = [];
    foreach($this->request->get('task_name') as $key => $val) {
        $messages['task_name.'.$key.'.max'] = 'The field labeled task name must be less than :max characters.';
        $messages['task_name.'.$key.'.required'] = 'The field task name is required.';
        $messages['task_description.'.$key.'.max'] = 'The field task description must be less than :max characters.';
        $messages['task_description.'.$key.'.required'] = 'The field task description is required.';
    }
    return $messages;
}

Scenario 2: Updating an existing Schedule. This fails and I receive the following error message:

ErrorException in helpers.php line 454: htmlentities() expects parameter 1 to be string, array given (View: /Users/petestewart/Documents/Git Repos/.../resources/views/schedules/partials/_form.blade.php) (View: /Users/.../Documents/Git Repos/.../resources/views/schedules/partials/_form.blade.php)

Here is the Schedule controller update function:

/**
 * Update the specified resource in storage.
 *
 * @param  \App\Schedule $schedule
 * @return Response
 */
public function update(Schedule $schedule, ScheduleRequest $request)
{
    $schedule->name = $request->name;
    $schedule->apiary_id = $request->apiary_id;
    $schedule->due_at = $request->due_at;
    $schedule->update();

    // Attach users to the new schedule
    $schedule->users()->sync($request->get('users'));

    // Save the tasks
    if($request->get('task_name')){
        foreach($request->get('task_name') as $key => $task_name)
        {   
            //if(empty($task_name)) continue; // If a task is empty then skip to the next one   

            // Check if task exists and update task
            if(!empty($request->task[$key])){
                $task = Task::find($request->task[$key]);
                $task->name = $task_name;
                $task->description = $request->task_description[$key];
                $task->update();
            }else{
            // Add new task
                $task = new Task();
                $task->name = $task_name;
                $task->description = $request->task_description[$key];
                $task->schedule_id = $schedule->id;
                $task->save();
            }
        };
    };
    return Redirect::to('schedules')->with('success', trans('messages.update', ['name' => 'Schedule']));
}

And here is the HTML form:

@if(isset($tasks))  
        @foreach($tasks as $task)
            <div class="task-item row form-group">
                {!! Form::hidden('task[]', $task->id) !!}
                <a href="{{ route('schedules.task.delete', $task) }}" class="btn btn-danger btn-sm task-delete-btn" data-method="delete" data-confirm="Are you sure you want to delete this task?"><span class="fa fa-trash"></span></a>
                <div class="col-sm-4 task-name">
                    {!! Form::label('task_name', 'Task Name', array('class'=>'control-label')) !!}
                    {!! Form::text('task_name[]', $task->name, array('class'=>'form-control')) !!}
                </div>
                <div class="col-sm-8">
                    {!! Form::label('task_description', 'Task Description', array('class'=>'control-label')) !!}
                    {!! Form::text('task_description[]', $task->description, array('class'=>'form-control')) !!}
                </div>
            </div>
        @endforeach        
    @else
        @if(Form::old('task_name'))
            @foreach(old('task_name') as $key => $val)
                <div class="task-item row form-group">
                    <a href="#" class="btn btn-default btn-sm remove-task"><span class="fa fa-minus"></span></a>
                    <div class="col-sm-4 task-name {!! $errors->first('task_name.'.$key, 'has-error') !!}">
                        {!! Form::label('task_name', 'Task Name', array('class'=>'control-label')) !!}
                        {!! Form::text('task_name['.$key.']', old('task_name.'.$key), array('class'=>'form-control')) !!}
                        {!! $errors->first('task_name.'.$key, '<p>:message</p>') !!}
                    </div>
                    <div class="col-sm-8 {!! $errors->first('task_description.'.$key, 'has-error') !!}">
                        {!! Form::label('task_description', 'Task Description', array('class'=>'control-label')) !!}
                        {!! Form::text('task_description['.$key.']', old('task_description.'.$key), array('class'=>'form-control')) !!}
                        {!! $errors->first('task_description.'.$key, '<p>:message</p>') !!}
                    </div>
                </div>
            @endforeach
        @else
            <div class="task-item row form-group">
                <a href="#" class="btn btn-default btn-sm remove-task"><span class="fa fa-minus"></span></a>
                <div class="col-sm-4 task-name">
                    {!! Form::label('task_name', 'Task Name', array('class'=>'control-label')) !!}
                    {!! Form::text('task_name[]', null, array('class'=>'form-control')) !!}
                    {!! $errors->first('task_name', '<p>:message</p>') !!}
                </div>
                <div class="col-sm-8">
                    {!! Form::label('task_description', 'Task Description', array('class'=>'control-label')) !!}
                    {!! Form::text('task_description[]', null, array('class'=>'form-control')) !!}
                </div>
            </div>
        @endif
    @endif
    <a href="#" class="btn btn-default btn-sm" id="add-task"><span class="fa fa-plus"></span></a>

And finally the Jquery responsible for adding and removing tasks:

var TaskList = {

    addTaskBtn: $('#add-task'),
    completeTaskBtn: $('.task-complete-btn'),
    deleteTaskBtn: $('.task-delete-btn'),
    taskTemplate: '<div class="task-item row form-group"> \
                        <a href="#" class="btn btn-default btn-sm remove-task"><span class="fa fa-minus"></span></a> \
                        <div class="col-sm-4 task-name"> \
                            <label for="task_name" class="control-label">Task Name</label> \
                            <input class="form-control" name="task_name[]" type="text"> \
                        </div> \
                        <div class="col-sm-8"> \
                            <label for="task_description" class="control-label">Task Description</label> \
                            <input class="form-control" name="task_description[]" type="text"> \
                        </div> \
                    </div>',

    init: function() { 
        this.bindUIActions();
    },
    bindUIActions: function() {
        // Add new task item
        this.addTaskBtn.click(function () {
            $('.task-item:last').after(TaskList.taskTemplate);
            var newTask = $('.task-item:last');
            newTask.find('input[type=text]:first').focus();             
            return false;
        }); 
        $(document).on('click', 'a.remove-task', function (e) {
            if($(this).parent().is(':first-child')){
                $(this).parent().find('input[type=text]').val('');
                return;
            };
            $(this).parent().remove();
            return false;
        }); 
        // Set task as complete via AJAX
        this.completeTaskBtn.change(function () {
            var h3 = $(this).parent().parent().parent().parent().find('h3');
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            var url = '/schedules/update-task';
            $.ajax({
                type: 'POST',
                url: url,
                data: {   
                    id: $(this).attr('id'),
                    complete: $(this).is(':checked')? 1 : 0,
                    '_token': CSRF_TOKEN
                },
                dataType: 'JSON',
                success: function (data) {
                    h3.find('span').remove();
                    h3.append(data.status_label);
                }
            });
            return false;
        });
        // Delete Task via AJAX
        this.deleteTaskBtn.click(function () {
            var taskWrapper = $(this).parent();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            var url = $(this).attr('href');
            if (confirm('Are you sure you want to delete this task?')) {
                $.ajax({
                    type: 'DELETE',
                    url: url,
                    data: {   
                        '_token': CSRF_TOKEN
                    },
                    dataType: 'JSON',
                    success: function (data) {
                        taskWrapper.remove();
                    }
                });
            }
            return false;
        });
    },
};

Any help with validating this when updating a Schedule would be appreciated. Thanks a lot!

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/1L3jAUw
via IFTTT