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.
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.