jQuery проверки не работают после перехода с Bootstrap 3 на Bootstap 4. Какие изменения мне следует сделать?

Question

Все jQuery проверки работали должным образом в Bootstrap 3, но когда я переключился на Bootstrap 4, они не работают из-за некоторых изменений в Bootstrap 4. Пожалуйста, скажите мне, где я должен измениться в моем jQuery.

Форма входа

<form id="login_form" method="post" action="#">
  <div class="form-group vd">
         <label for="email" class="">Email</label>
         <input class="form-control" id="email" name="email" type="text" required>
 </div>
  <div class="form-group vd">
         <label for="password">Password</label>
         <input class="form-control" id="password" name="password" type="password" required>
 </div>
     <div class="form-group mt-4"><button type="submit" class="btn btn-block btnbg1 text-white">Log In</button></div>
</form>

Jquery Код:

 <script type="text/javascript">
    $.validator.setDefaults( {
        submitHandler: function () {
            alert( "submitted!" );
        }
    } );

    $( document ).ready( function () {
        $( "#login_form" ).validate( {
            rules: {       
                password: {
                    required: true,
                    minlength: 6
                },

                email: {
                    required: true,
                    email: true
                },
            },
            messages: {              
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },  
                email: "Please enter a valid email address",
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "form-text" );

                // Add `has-feedback` class to the parent div.form-group
                // in order to add icons to inputs
                element.parents( ".vd" ).addClass( "has-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }

                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !element.next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'><i class='fa fa-times' aria-hidden='true'></i></span>" ).insertAfter( element );
                }
            },
            success: function ( label, element ) {
                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !$( element ).next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".vd" ).addClass( "has-error" ).removeClass( "has-success" );
                $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
            },
            unhighlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".vd" ).addClass( "has-success" ).removeClass( "has-error" );
                $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
            }
        } );
    } );
</script>

Скажите, пожалуйста, где я должен измениться в моем Jquery код в соответствии с bootstrap 4.