Why isn't comment validation working?

Question

I am trying to add Jquery validation to the comments page in WordPress. Everything works except it won't post the fields. May someone help?

Comments page:

    <?php foreach (get_comments() as $comment): ?>
        <ul class="uk-comment-list">
        <li>
            <article class="uk-comment uk-visible-toggle" tabindex="-1">
                <header class="uk-comment-header uk-position-relative">
                    <div class="uk-grid-medium uk-flex-middle" uk-grid>
                        <div class="uk-width-auto">
                            <img class="uk-comment-avatar" src="images/avatar.jpg" width="80" height="80" alt="">
                        </div>
                        <div class="uk-width-expand">
                            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">    <?php echo $comment->comment_author; ?>
                            </a></h4>
                            <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
                        </div>
                    </div>
                    <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
                </header>
          <div class="uk-comment-body">
                <?php echo $comment->comment_content; ?>
                </div>
            </article>

    <?php endforeach;



    if ('open' == $post->comment_status) : ?>

        <div id="respond">

        <h3><?php comment_form_title( 'Add a comment', 'Leave a Reply to %s' ); ?></h3>

        <div class="cancel-comment-reply">
            <small><?php cancel_comment_reply_link(); ?></small>
        </div>

        <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
            <p>
                You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.
            </p>

        <?php else : ?>

    <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
        <?php if ( $user_ID ) : ?>

                    <p>
                        Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
                        <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a>
                    </p>

                <?php else : ?>

                    <div class="row">
                       <div class="form-group">
                           <div class="col-lg-12"><label class="control-label" for="author">Name</label></div>
                           <div class="col-lg-5"><input class="form-control" name="author" id="author" value="" size="22" tabindex="1" type="text"></div>
                       </div>
                   </div>

                    <div class="row">
                       <div class="form-group">
                           <div class="col-lg-12"><label class="control-label" for="email">Email</label></div>
                           <div class="col-lg-5"><input class="form-control" name="email" id="email" value="" size="22" tabindex="2" type="text"></div>
                           <span class="help-block col-lg-12">You're email address will not be published</span>
                       </div>
                   </div>



  <?php endif; ?>

            <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

            <div class="row">
                   <div class="form-group">
                       <div class="col-lg-12"><label class="control-label" for="comment">Comment</label></div>
                       <div class="col-lg-12"><textarea class="form-control" name="comment" id="comment" cols="100" rows="10" tabindex="3"></textarea></div>
                   </div>
            </div>
            <div class="row">
                   <div class="form-group">
                       <div class="col-lg-12">
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /> 
</div>
                       <?php comment_id_fields(); ?>                    </div> 
               </div>

<?php do_action('comment_form', $post->ID); ?>
</form>



  <?php endif; // If registration required and not logged in ?>
    </div>
<?php endif; // if you delete this the sky will fall on your head  ?>

Functions page

function comment_validation_init() {
if(is_single() && comments_open() ) { ?>

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#commentform').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            author: {
                validators: {
                        notEmpty: {
                            message: 'Please Enter Your Name'
                        }
                }
            },
            email: {
                validators: {
                        notEmpty: {
                            message: 'Please Enter Your Email'
                        },
                        emailAddress: {
                            message: 'This Is Not A Valid Email Address'
                    }
                }

            },
            comment: {
                validators: {
                        notEmpty: {
                            message: "Don't Forget To Leave A Comment"
                        }
                }                
            }
        }
    });
});

</script>

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

Answer 1

Add code in your theme function.php file

function comment_validation_init() { if(is_single() && comments_open() ) { ?> 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: "Comments required minimum 20 characters."
},

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

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