循环生成表单的验证错误定位错误及样式异常修复咨询

问题1：错误标签定位错误的修复 #

核心原因 #

循环生成的所有输入框使用了重复的id="price"和id="bprice"，jQuery的$("#" + key)选择器只会匹配DOM中第一个对应id的元素，导致错误标签全部渲染到第一组表单。

修复步骤 #

1. 修改Blade模板，确保输入框id唯一
   给每个输入框的id添加国家后缀，避免重复：

<div class="row">
    @foreach ($countries as $cntry)
        @php
            $currency = array_key_exists($cntry, $currencies) ? $currencies[$cntry] : '';
            $exp = explode('|', $currency);
            $price = count($exp) >= 2 ? $exp[0] : '';
            $bprice = count($exp) >= 2 ? $exp[1] : '';
        @endphp

        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 col-sm-12 col-xs-12 main-div">
                            <label>Price ({{ $cntry }})</label>
                            <input type="number"  class="form-control carfax_report_price"
                                data-currency="{{ $cntry }}" value="{{ $price }}" 
                                id="price_{{ $cntry }}" name="price" required>
                        </div>
                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <label>Price (OMR)</label>
                            <input type="number"  class="form-control carfax_report_bprice"
                                value="{{ $bprice }}" id="bprice_{{ $cntry }}" name="bprice" required>
                        </div>
                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <label>&nbsp;</label>
                            <button type="button" class="btn btn-primary btn-block btn-update-price">
                                <i class="fas fa-update"></i> Update
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

2. 调整Ajax逻辑，定位当前操作的表单组
   点击按钮时，先锁定当前操作的表单组，仅在该组内查找输入框并渲染错误：

$('.btn-update-price').on('click', function(e) {
    const $btn = $(this);
    const $formGroup = $btn.closest('.card-body'); // 获取当前点击按钮所属的表单组
    const currency = $formGroup.find('.carfax_report_price').data('currency');
    const price = $formGroup.find('.carfax_report_price').val();
    const bprice = $formGroup.find('.carfax_report_bprice').val();

    $.ajax({
        type: 'POST',
        url: '{{ route('others.carfaxreportprice.update') }}',
        data: {
            _token: '{{ csrf_token() }}', // Laravel必填CSRF令牌
            currency: currency,
            price: price,
            bprice: bprice
        },
        success: function(response) {
            if (response.msg == 'success') {
                Swal.fire('Success', 'Price Updated', 'success');
                // 成功后清除当前组的错误状态
                $formGroup.find('.error').removeClass('error');
                $formGroup.find('label.error').remove();
            } else {
                Swal.fire('Error', 'Unexpected error please try again', 'error');
            }
        },
        error: function(error) {
            const errors = error.responseJSON.errors;
            // 先清除当前组的旧错误标签和样式
            $formGroup.find('label.error').remove();
            $formGroup.find('.error').removeClass('error');

            Object.entries(errors).forEach(([key, value]) => {
                // 拼接唯一id，找到当前组内的目标输入框
                const inputId = `${key}_${currency}`;
                const $input = $formGroup.find(`#${inputId}`);
                $input.addClass('error');
                $input.parent().append(`<label class="error ${key}-error">${value}</label>`);
            });
        },
    });
});

问题2：错误标签样式异常的修复 #

核心原因 #

错误标签默认继承了父元素label的样式（如大字体、高行高），导致布局错乱。

修复步骤 #

添加自定义CSS样式，统一错误标签的显示效果：

/* 错误标签基础样式 */
label.error {
    color: #dc3545; /* 使用Bootstrap危险色，保持风格统一 */
    font-size: 0.875rem; /* 缩小字体，避免过大 */
    margin-top: 0.25rem; /* 和输入框保持合理间距 */
    display: block; /* 独占一行，防止挤压输入框 */
    line-height: 1.2; /* 调整行高，避免div高度异常 */
    padding-left: 0; /* 清除默认label的内边距 */
}

/* 错误输入框样式（可选，和Bootstrap表单错误风格统一） */
.form-control.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

内容的提问来源于stack exchange，提问作者Cookie