Displaying the errors of sending comments as Ajax

Hello
Well, first of all, thank you for helping me
I am developing a template and I have enabled comments on the single .php page related to the posts
If someone enters something wrong in the comment submission section, for example, email or … in general, anything that causes an error during submission will enter the wp-comments-post.php page, but I don’t like this!
What I want to do is that the user does not see this page at all and errors are displayed on the same page in the form of Ajax and under the field that has the error, in this case the user will no longer see this page.
Now, to do this, I put this code in my function.php:

function comment_validation_init() {
    if(is_single() && comments_open() ) { ?>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#commentform').validate({

                    rules: {
                        author: {
                            required: true,
                            minlength: 2
                        },

                        email: {
                            required: true,
                            email: true
                        },

                        comment: {
                            required: true,
                            minlength: 20
                        }
                    },

                    messages: {
                        author: "Please fill the required field",
                        email: "Please enter a valid email address.",
                        comment: "Please fill the required field"
                    },

                    errorElement: "div",
                    errorPlacement: function(error, element) {
                        element.after(error);
                    }

                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'comment_validation_init');

And I put the following styles in a CSS file and the CSS file is called in the post.php file as follow

<link rel="stylesheet" href="https://projectdmc.org/support/topic/displaying-the-errors-of-sending-comments-as-ajax/<?php bloginfo("template_url'); ?>/css/comments.css">

(However, it is not that important)

But it doesn’t work properly, it works from time to time and I don’t know where the problem is!

If possible please give a solution to where the problem is in this code
Even if there is another way to do it, please tell me

Even if there is a plugin that does this, it would be great

Thankful