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?
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');
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 ยป</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">