Form validation using jQuery on multiple Form on multiple Modal

Question

I am using this jQuery plugin for Form Validation.

I have 2 Forms on BootStrap Modal like below.

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

My jQuery code is like below

$(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",
        validClass: "valid success-alert",
        rules: {
            total_questions: {
                required: true
            }
        }
    });
});

First validation is working but Second validation is not working.

Answer 1

Please try below script

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