0

I've build a custom comments form which hooks onto the default comment_form() in twenty twelve child theme. Here is my code functions.php

function pietergoosen_custom_comment_fields($fields) {

                $commenter = wp_get_current_commenter();
                $req = get_option( 'require_name_email' );
                $aria_req = ( $req ? " aria-required='true'" : '' );

                $fields =  array(

  'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'pietergoosen' ) .
    ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'email' =>
    '<p class="comment-form-email"><label for="email">' . __( 'email', 'pietergoosen' ) .
    ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'verwysing' =>
    '<p class="comment-form-refer"><label for="refer">' . __( 'Where did you hear about us', 'pietergoosen' ) . '</label>' .
    '<input id="verwysing" name="refer" type="text" value="' . esc_attr( $commenter['comment_author_refer'] ) .
    '" size="30" /></p>',
);
        return $fields;
}

add_filter('comment_form_default_fields','pietergoosen_custom_comment_fields');

This is the how I enqueue my jquery scrips in functions.php and also the jquey validation in comment-validation.js. It works fine without going to the default error page wordpress uses.

function pietergoosen_comments_validation() {
if(is_single() && comments_open() ) { 
    wp_enqueue_script('jqueryvalidate', get_stylesheet_directory_uri().'/js/jquery.validate.pack.js', array('jquery'));
    wp_enqueue_script('commentvalidation', get_stylesheet_directory_uri().'/js/comment-validation.js', array('jquery','jqueryvalidate'));
    }
}
add_action('wp_enqueue_scripts', 'pietergoosen_comments_validation');

jQuery(document).ready(function($) {
$('#commentform').validate({

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

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

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

messages: {
  author: "Please provide a valid name",
  email: "Please provide a valid email",
  comment: "Comments needs to be at least 20 characters"
},

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

});
});

The problem is, I modified the code to include other customizations for the form as in here:

 function pietergoosen_custom_comment_fields($args = array(), $post_id = null) {
        if ( null === $post_id )
                $post_id = get_the_ID();
        else
                $id = $post_id;

        $commenter = wp_get_current_commenter();
        $user = wp_get_current_user();
        $user_identity = $user->exists() ? $user->display_name : '';

        $req      = get_option( 'require_name_email' );
        $aria_req = ( $req ? " aria-required='true'" : '' );
        $html5    = isset( $args['format'] ) && 'html5' === $args['format'];
                $fields =  array(

                'author' =>
                '<p class="comment-form-author"><label for="author">' . __( 'Name', 'pietergoosen' ) .
                ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' .
                '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
                '" size="30"' . $aria_req . ' /></p>',

                'email' =>
                '<p class="comment-form-email"><label for="email">' . __( 'email', 'pietergoosen' ) .
                ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' .
                '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
                '" size="30"' . $aria_req . ' /></p>',

                'verwysing' =>
                '<p class="comment-form-refer"><label for="refer">' . __( 'Where did you hear about us', 'pietergoosen' ) . '</label>' .
                '<input id="refer" name="refer" type="text" value="' . esc_attr( $commenter['comment_author_refer'] ) .
                '" size="30" /></p>',
);

        $required_text = sprintf( ' ' . __('Fields marked %s are required and must be filled in'), '<span class="required">*</span>' );

        $arg = array(
                'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
                'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Share your thoughts on this post', 'noun' ) . '</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
                'must_log_in'          => '<p class="must-log-in">' . sprintf( __( 'Please <a href="%s">sign in</a> to share your thoughts' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
                'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'You are currently signed in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Sign out">Sign out?</a>' ), get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
                'comment_notes_before' => '<p class="comment-notes">' . __( 'Be assured, your email will never be shared with anyone' ) . ( $req ? $required_text : '' ) . '</p>',
                'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'Thank you for sharing your thoughts.' )) . '</p>',
                'title_reply'          => __( 'Share your thoughts' ),
                'title_reply_to'       => __( 'Share your thoughts on %s' ),
                'cancel_reply_link'    => __( 'Remove your thoughts' ),
                'label_submit'         => __( 'Send' ),
                );
        return $arg;
}

add_filter('comment_form_defaults', 'pietergoosen_custom_comment_fields');

Everything in my comment form works like it should, but now my validation script is not working. If validation fails, it redirects to the default wordpress error page. My custom validation script is not working to validate the submitted info on page.

Am I using a wrong hook, or is there something I missed in the validation script.

0

Ok, I've worked this out. You need to copy the complete first section of the `comment_form()' from wp core. This is the code

<?php
function comment_form( $args = array(), $post_id = null ) {
    if ( null === $post_id )
        $post_id = get_the_ID();
    else
        $id = $post_id;

    $commenter = wp_get_current_commenter();
    $user = wp_get_current_user();
    $user_identity = $user->exists() ? $user->display_name : '';

    $args = wp_parse_args( $args );
    if ( ! isset( $args['format'] ) )
        $args['format'] = current_theme_supports( 'html5', 'comment-form' ) ? 'html5' : 'xhtml';

    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );
    $html5    = 'html5' === $args['format'];
    $fields   =  array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
                    '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
    );

    $required_text = sprintf( ' ' . __('Required fields are marked %s'), '<span class="required">*</span>' );

    /**
     * Filter the default comment form fields.
     *
     * @since 3.0.0
     *
     * @param array $fields The default comment fields.
     */
    $fields = apply_filters( 'comment_form_default_fields', $fields );
    $defaults = array(
        'fields'               => $fields,
        'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
        'must_log_in'          => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
        'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
        'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
        'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
        'id_form'              => 'commentform',
        'id_submit'            => 'submit',
        'title_reply'          => __( 'Leave a Reply' ),
        'title_reply_to'       => __( 'Leave a Reply to %s' ),
        'cancel_reply_link'    => __( 'Cancel reply' ),
        'label_submit'         => __( 'Post Comment' ),
        'format'               => 'xhtml',
    );
?>

You can now make your changes, rename the function, and add it to comment_form_defaults

Even if you need to just change one thing, you will need to cope this complete section for the validation to work correctly

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.