Ajax 模态提交解析 json 对表单错误的响应，错误消息在两个字段中重复出现

Question

我有一个模态 window 正在通过 ajax 向数据库提交表单，如果发生错误，它将返回 json 响应。 这在只有一个输入字段的模态 windows 上运行良好，但我有另一个具有 2 个字段的模态 window 并且 json 响应正确返回错误消息，例如：

如您所见，两个带有错误的字段都在响应中。 就像我说的那样，我的脚本工作正常，并且会显示只有一个文本输入的表单的错误，但我在这个表单中有两个（忽略第一个 select 元素，它是通过 ajax 预填充的）。 这是我处理 ajax 成功和错误响应的脚本：

$(document).ready(function () //function to process modal form via ajax
{
    $('.modal-submit').on('submit', function(e){
        e.preventDefault(); //prevent default form submit action

        var data = $(this).serialize();
        var type = $(this).find('input[name="type"]').val(); //get value of hidden input
        var url = $(this).attr('action'); //get action from form
        var modal = $(this).closest('.modal');
        var modalInput = $(this).find('.form-row input'); //get input from form
        var modalId = $(this).closest('.modal').attr('id');

        $.ajax({
            url:url,
            method:'POST',
            data:data,
            success:function(response){
                refreshData(newId = response.id, modalId); // set newId to the id of the newly inserted item, get modalId
                modal.modal('hide'); //hide modal
                $(modalInput).val(''); //clear input value
            },
            error:function(response){
                $.each(response.responseJSON.error, function (i, error) {
                    console.log(data);
                    console.log(response.responseJSON.error);
                    $(modalInput).addClass('input-error');
                    $('#' + modalId + ' .backend-error').html(error[0]); //return error from backend
                });
            }
        });
    });
});

这是具有多个输入的模态 window 的 html：

<!-- Add New Model Modal -->
<div class="modal fade" id="modelModal" tabindex="-1" role="dialog" aria-labelledby="modelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelModalLabel">Add new asset model</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <form method="post" class="modal-submit" autocomplete="off" action="{{ action('AddAssetController@addDescriptor', ['type' => 'model']) }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" name="type" value="model">
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="inputManufacturerModel">Manufacturer *</label>
                        <div class="input-group">
                            <select name="inputManufacturerModel" id="inputManufacturerModel" class="form-control" required="required" onclick="refreshData()">
                                <option value="0">Select manufacturer...</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="inputModelNew">New model name *</label>
                        <div class="input-group">
                            <input type="text" name="inputModelNew" id="inputModelNew" class="form-control" placeholder="Add manufacturer model name" required="required">
                        </div>
                        <div class="backend-error"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="inputModelNoNew">New model # *</label>
                        <div class="input-group">
                            <input type="text" name="inputModelNoNew" id="inputModelNoNew" class="form-control" placeholder="Add manufacturer model #" required="required">
                        </div>
                        <div class="backend-error"></div>
                    </div>
                </div>
                <div class="float-right">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
<!-- / Add New Model Modal -->

错误响应的结果：

我需要遍历错误吗？ 如何在正确的输入字段下显示相关错误？

Answer 1

在 ajax 错误中不要使用此$(modalInput).addClass('input-error')因为这会将 class 添加到所有模态的输入，这会将错误设置为所有模态的输入。 $('#' + modalId + '.backend-error').html(error[0]);

使用输入 ID 设置错误，如您的情况$('#inputModelNew').parent('.input-group').siblings('.backend-error').addClass('input-error').html(error [0])