Dynamic form inputs added using JavaScript validation in Laravel? - php

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;

Answer 1

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