jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-calendar/0.2.5/css/calendar.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-calendar/0.2.5/js/calendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<form method="POST" action="/times" accept-charset="UTF-8" id="registerTime" novalidate="novalidate">
    <input name="_token" type="hidden" value="DezD0WQdWvXXW4If2xg5NhnAFd2vnkK6nNDXRUQ2">
    <input name="account_id" type="hidden" value="3423">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ui-draggable-handle">
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
                <h4 class="modal-title">Register your time!</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger hidden" id="time-error"></div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="project" class="control-label">Select Project</label>
                                <select class="form-control" name="project_id">
                                      <option value="">Select Project</option>
                                      <option value="project1">Project1</option>
        ...

JavaScript

$(document).ready(function() {

    $('.selectpicker').selectpicker({

    });


    var timesRegister = $('#registerTime').validate({
        ignore: "",
        debug: true,
        groups: {
            timeGroup: "hour minutes"
        },
        rules: {
            project_id: {
                required: true
            },
            datum: {
                required: true
            },
            hour: {
                require_from_group: [1, ".time-group"]
            },
            minutes: {
                require_from_group: [1, ".time-group"]
            }
        },

        messages: {
            project_id: "Please Select the working on Project!",
            datum: "Please enter working date!",
            //hour: "Please select the working hour/hours!",
            minutes: "Please select the working minutes!",
            hours_descr: "Please describe short the task!",
        },
        submitHandler: function(form) {
            /*$.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: $(form).serialize(),
                success: function () {

                    $('#responsive').modal('hide');
                    $('#registerTime')[0].reset();
                    Timetool.init();
                    setTimeout(() => timeTable.ajax.reload(), 1000);


                }, error: function (r) {
                    $("#time-error").empty();
                    $("#time-error").append(r.responseJSON.content).removeClass('hidden');
                }
            });*/
        }
    });

});