Dynamic form inputs added using JavaScript validation in Laravel?

Question

I have some input fields in a form. Which can be added dynamically using javascript. For example, if click 'Add another Post Graduation' button, again a div is added like below with all the inputs field.

<div class="shadow p-4 border mb-5 postgraduation-div">
    <span class="bg-dark text-white py-1 px-3 my-board-name">Post Graduation</span>
    <div class="form-check">
        <input class="form-check-input" name="pg_checkbox[]" value="pg_checked" type="checkbox">
        <label class="form-check-label"> Enable </label>
    </div>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="employee-name">University: </label>
                <input type="text" class="form-control" name="pg_university[]">
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <label for="exampleInputEmail1">Passing Year: </label>
                <input type="text" class="form-control" name="pg_passing_year[]">
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <label for="exampleInputEmail1">Percentage: </label>
                <input type="text" class="form-control" name="pg_percentage[]">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="exampleInputEmail1">Degree: </label>
                <input type="text" class="form-control" name="pg_degree[]">
            </div>                        
        </div>
        <div class="col">
            <div class="form-group">
                <label for="exampleInputEmail1">Subject: </label>
                <input type="text" class="form-control" name="pg_subject[]">
            </div>
        </div>
    </div>
    <div class="text-center">
        <span class="btn btn-outline-dark btn-sm add-pg-btn"><i class="fas fa-plus"></i> Add another Post Graduation</span>
    </div>
</div>

First I have to check if the checkbox is checked or not. If checked, the input fields should be validated. I am able to save the data using the below code in my controller:

if(request('pg_checkbox')){
    $pg_checkbox_count = count(request('pg_checkbox'));
    for($i=0; $i<$pg_checkbox_count; $i++){
        if(request('pg_checkbox')[$i] == 'pg_checked'){
            $postgraduation_data = new Postgraduation_data;
            $postgraduation_data->user_id = $user_id;
            $postgraduation_data->university = request('pg_university')[$i];
            $postgraduation_data->passing_year = request('pg_passing_year')[$i];
            $postgraduation_data->percentage = request('pg_percentage')[$i];
            $postgraduation_data->subject = request('pg_subject')[$i];
            $postgraduation_data->degree = request('pg_degree')[$i];
            $postgraduation_data->save();
        }
    }
}

But I am not able to validate these inputs in my custom request class:

$rules = [];
if(request('pg_checkbox')){
    $pg_checkbox_count = count(request('pg_checkbox'));
    for($i=0; $i<$pg_checkbox_count; $i++){
        if( request('pg_checkbox')[$i] == 'pg_checked'){
            $rules['pg_university'.$i] = 'required';
            $rules['pg_passing_year'.$i] = 'required | digits:4';
        }
    }
}

return $rules;

you shouldn't be reinventing the wheel and validating inputs like this check out laravel.com/docs/6.x/validation create a request and add rules to this request — prola

Roham Shahedi Roham Shahedi · Accepted Answer · 2020-02-20T22:21:22

There are different ways to do this. The simplest way to use class validator is to enter and use information inside the attribute of each class. enter image description here

 {{--Name--}}
 <label for="name" class="required_field">{{ __( 'articles.ArticleName' ) }}</label>
 <input type="text" id="name" 
                    name="name"
                    maxlength="30"
                    class="validate[required,maxSize[30]] form-control"
                    title="{{ __( 'articles.CreateTitleName' ) }}">

add this script in javascript section:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("#create_article_form").validationEngine();
    });
</script>

Download the validator file from this link below and use it in your project.

https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/README.md

Dynamic form inputs added using JavaScript validation in Laravel?

1 Answers