Bootstrap Modal中jQuery Validation仅验证首行供应商数据问题求助

你遇到的问题核心是重复的HTML ID：

• 循环渲染的每个编辑Modal里，表单都用了相同的id="editForm"，而HTML中ID必须唯一，$('#editForm').validate()只会给第一个匹配的表单绑定验证规则，后续表单完全没生效。
• 表单内的输入框（如id="name"、id="mobile_no"）也存在重复ID问题，虽然不直接影响验证，但违反HTML规范，可能引发其他兼容问题。

1. 修改Modal模板，确保ID唯一 #

给表单和输入框添加供应商ID作为唯一标识，同时给表单加一个统一的类名方便批量绑定验证：

<div class="modal fade editModal" id="edit{{ $supplier->id }}" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel-{{ $supplier->id }}">Edit Supplier</h5>
                <button type="button" class="btn btn-danger btn-sm close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 给表单加唯一ID和统一类名 -->
            <form id="editForm-{{ $supplier->id }}" class="edit-supplier-form" method="POST" action="{{ route('supplier.update', $supplier->id) }}"
                  novalidate>
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- name -->
                    <div class="col-md-12 ">
                        <div class="mb-3 position-relative form-group">
                             <!-- 输入框ID添加唯一标识 -->
                             <input class="form-control" type="text" autocomplete="name" placeholder="Supplier Name"
                                id="name-{{ $supplier->id }}" name="name1" value="{{ $supplier->name }}">
                        </div>
                    </div>
                    <!-- mobile number -->
                    <div class="col-md-12 ">
                        <div class="mb-3 position-relative form-group">
                            <input class="form-control " type="text" autocomplete="mobile_no"
                                placeholder="Mobile Number" id="mobile_no-{{ $supplier->id }}" name="mobile_no1"
                                value="{{ $supplier->mobile_no }}">
                        </div>
                    </div>
                    <!-- email -->
                    <div class="col-md-12 ">
                        <div class="mb-3 position-relative form-group">
                            <input class="form-control " type="email" placeholder="Email" id="email_address-{{ $supplier->id }}"
                                name="email_address1" value="{{ $supplier->email }}">
                        </div>
                    </div>
                    <div class="col-md-12 ">
                        <div class="mb-3 position-relative form-group">
                            <input class="form-control" type="text" autocomplete="address" placeholder="Address"
                                id="address-{{ $supplier->id }}" name="address1" value="{{ $supplier->address }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- 重置函数传入当前表单ID -->
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="resetForm('editForm-{{ $supplier->id }}')">No</button>
                    <button type="submit" class="btn btn-primary">Update Supplier</button>
                </div>
            </form>
        </div>
    </div>
</div>

2. 修改jQuery验证代码，批量绑定所有表单 #

通过类选择器遍历所有编辑表单，给每个表单单独绑定验证规则：

<script type="text/javascript">
    $(document).ready(function() {
        // 遍历所有编辑表单，绑定验证
        $('.edit-supplier-form').each(function() {
            $(this).validate({
                rules: {
                    name1: {
                        required: true,
                    },
                    mobile_no1: {
                        required: true,
                    },
                    address1: {
                        required: true,
                    },
                    email_address1: {
                        required: true,
                        email: true // 补充邮箱格式验证
                    },
                },
                messages: {
                    name1: {
                        required: 'Please Enter Supplier Name',
                    },
                    mobile_no1: {
                        required: 'Please Enter Supplier mobile number',
                    },
                    address1: {
                        required: 'Please Enter Supplier address',
                    },
                    email_address1: {
                        required: 'Please Enter Supplier email',
                        email: 'Please enter a valid email address'
                    },
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
            });
        });
    });
 
    // 重置指定表单
    function resetForm(formId) {
        $("#" + formId).trigger("reset");
        var validator = $("#" + formId).validate();
        validator.resetForm();
    }
</script>

额外优化建议 #

• 表单提交按钮文本从"Add Supplier"改为"Update Supplier"，符合编辑场景语义。
• 邮箱输入框type属性修正为email，利用浏览器原生基础格式校验。

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