在 Laravel 中使用 JavaScript 验证添加动态表单输入？

Question

我在表单中有一些输入字段。可以使用javascript动态添加。例如，如果单击“添加另一个毕业后”按钮，则会再次添加一个 div，如下所示，其中包含所有输入字段。

<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>

首先我必须检查复选框是否被选中。如果选中，则应验证输入字段。我可以在我的控制器中使用以下代码保存数据：

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();
        }
    }
}

但我无法在我的自定义请求类中验证这些输入：

$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

有不同的方法可以做到这一点。 使用类验证器最简单的方法是在每个类的属性中输入和使用信息。 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' ) }}">

在 javascript 部分添加此脚本：

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

从此链接下载验证器文件，并在您的项目中使用它。

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