在多个 Modal 上的多个 Form 上使用 jQuery 进行表单验证

问题描述

我使用 this jQuery 插件进行表单验证。

我在 BootStrap Modal 上有 2 个表单，如下所示。

  <div class="modal fade" id="editcourse{{ $course->id }}" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">                                      
        <form action="{{ route('admin.subCourse.update') }}" method="post" id="update_course">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <div class="col-md-10">
                        <label>Total Questions</label>
                        <input type="text" class="form-control" name="total_questions">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>                                        
    </div>


    <div class="modal fade" id="createnewcourses" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">                
                <form action="{{ route('admin.subCourse.save') }}" method="post" id="create_course">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="col-md-10">
                                <label>Total Questions</label>
                                <input type="text" class="form-control" name="total_questions">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

我的jQuery代码如下

$(document).ready(function () {
 // This one is working
    $('#create_course').validate({
        errorClass: "error fail-alert",validClass: "valid success-alert",rules: {
            total_questions: {
                required: true
            }
        }
    });


    $('#update_course').validate({
     // This one is Not working
        errorClass: "error fail-alert",rules: {
            total_questions: {
                required: true
            }
        }
    });
});

第一次验证有效，但第二次验证无效。

解决方法

请尝试以下脚本

$(document).ready(function () { // This one is working $('#create_course,#update_course').validate({ errorClass: "error fail-alert",validClass: "valid success-alert",rules: { total_questions: { required: true } } });