Question

背景故事

我一直在创建基于twitter bootstrap的wordpress主题。我想对表格进行一些前端验证。

这将是评论表格，最后是联系表格。

有用的链接

BootstrapValidator Bootstrap

我必须

我已经进行了前端验证工作。

然而，当我尝试提交表格时，没有任何事情发生。

如果我从我的functions.php中删除了Javascript代码，表单将会提交，但不会有前端表单验证。

这是我的代码

评论表单在comments.php

中

请注意，如果我删除了functions.php中的代码

，则会提交

<?php  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" class="form-simple">
            <?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">
                            <input class="btn btn-primary top-margin bottom-margin comment-btn" name="submit" id="submit" tabindex="4" value="Submit Comment" type="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.php

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');

那么你能提出什么建议？

我还考虑过使用jqueryvalidation

非常感谢：）

使用bootstrapValidator验证wordpress注释表单

0 个答案: