How to make a tag description required

0 Views

I’m pretty new to WordPress, but basically what I’m trying to achieve is to make a tag’s description a required field on my custom theme for WordPress 4.5.2

I’ve tried three approaches, but all of them failed so if anyone WordPress expert out there could guide me would be nice.

Read More

Approach #1

functions.php

I’ve tried to ‘edit’ the hook when the edit_tag_form_fields and add_tag_form hook is called, then modify via Javascript 

function require_category_description(){
    require_once('includes/require_category_description.php');
}
add_action('edit_tag_form_fields', 'require_category_description');
add_action('add_tag_form', 'require_category_description');

require_category_description.php

<script>
    jQuery(document).ready(function(){
        var description = jQuery('#tag-description');
        if(!description) description = jQuery('#description');

        if(description){
            description.parents('form').submit(function(){
                if(description.val().trim().length < 1){
                    console.log('Please enter a description...');
                    return false;
                }
            });
        }
    });
</script>

It was not working, the form was submitting even though the description field was empty, and above all, the console.log inside the event listener never happened. I’ve tried to log the description variable to make sure it’s going inside the if case. Therefore, I assumed the form was never submitting, and the whole ‘submission’ is done via Ajax, on the button click.

Approach #2

The functions.php remains the same as approach #1, but I’ve made some changes Javascript wise to target the button click event instead of the form submit event.

require_category_description.php

<script>
    jQuery(document).ready(function(){
        var description = jQuery('#tag-description');
        if(!description) description = jQuery('#description');

        if(description){
            var button = description.parents('form').find('#submit');

            button.on('click', function(e){
                if(description.val().trim().length < 1)
                    console.log('Please enter a description...');

                e.preventDefault();
                return false;
            });
        }
    });
</script>

The form is however still submitting, but this time, I see the console log message.

Please enter a description…

My theory is that WordPress is binding an event to the button’s click before my event, so it’s processing the built-in event with Ajax before going to my custom click event.

Approach #3

require_category_description.php

I’ve tried to unbind the click events from my button before adding my own click event. 

<script>
    jQuery(document).ready(function(){
        var description = jQuery('#tag-description');
        if(!description) description = jQuery('#description');

        if(description){
            var button = description.parents('form').find('#submit');
            button.unbind('click');

            button.on('click', function(e){
                if(description.val().trim().length < 1)
                    console.log('Please enter a description...');

                e.preventDefault();
                return false;
            });
        }
    });
</script>

The result is the same as approach #2. The form is still submitting, but I see the console log message.

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. Edit tag:

    When editing tag, WordPress call wp_update_term. But there’re no filters or AJAX call, so we must use get_term() which is called by wp_update_term():

    add_filter('get_post_tag', function($term, $tax)
{
    if ( isset($_POST['description']) && empty($_POST['description']) ) {
        return new WP_Error('empty_term_name', __('Tag description cannot be empty!', 'text-domain'));
    } else {
        return $term;
    }
}, -1, 2);

    We also need to update term_updated_message to make the error clear:

    add_filter('term_updated_messages', function($messages)
{
    $messages['post_tag'][5] = sprintf('<span style="color:#dc3232">%s</span>', __('Tag description cannot be empty!', 'text-domain'));
    return $messages;
});

    Because WordPress hardcoded the notice message div, I used inline css to make the error look like a waring. Change it to your preference.

    Add new tag:

    The AJAX request calls wp_insert_term so we can use pre_insert_term filter. Try this in your functions.php

    add_filter('pre_insert_term', function($term, $tax)
{
    if ( ('post_tag' === $tax) && isset($_POST['description']) && empty($_POST['description']) ) {
        return new WP_Error('empty_term_name', __('Tag description cannot be empty!', 'text-domain'));
    } else {
        return $term;
    }
}, -1, 2);

    Here I used the built-in empty_term_name error to show notice message but you should register your own one.

    Also, take a look at wp_ajax_add_tag to fully understand what we’re doing.

    Demo:

    enter image description here

  2. It’s Ajax so you cannot rely on submit event, here is a solution, how you can do.

    All you want to do is include form-required class to the parent tag of the particular element, but there is kick on it. their validateForm check only on input tags not on textarea so I have implemented an idea, it works.

    Try this

    function put_admin_script() { ?>
<script>

    jQuery(document).ready(function(){
        var description = jQuery('#tag-description');
        if( !description ) { 
            description = jQuery('#description'); 
        }   
        if( description ) {
            description.after( $('<p style="visibility:hidden;" class="form-field form-required term-description-wrap"><input type="text" id="hidden-tag-desc" aria-required="true" value="" /></p>') );    
        }   
        description.keyup(function(){
            $("#hidden-tag-desc").val( $(this).val() ); 
        });

        jQuery("#addtag #submit").click(function(){
            console.log("Not empty"+description.val().trim().length);
            if( description.val().trim().length < 1 ) {
                description.css( "border", "solid 1px #dc3232" );
            } else {
                description.css( "border", "solid 1px #dddddd" );
            }                   
        }); 
    }); 

</script>
<?php 
}
add_action('admin_footer','put_admin_script');