How to add HTML5 'required' attribute to wp_dropdown_categories() without JavaScripts?

Question

I'm using wp_dropdown_categories() for populating <select> field with custom taxonomy terms.

If the code is like below:

<?php
$args = array(
    'show_option_none'   => __( 'Select one', 'text-domain' ),
    'taxonomy'           => 'my_tax',
    'id'                 => 'tax-type',
    'echo'               => 1,
);
wp_dropdown_categories( $args );

It's working just fine. I can make the field mandatory with jQuery:

$('#tax-type option:first').val(null);
$('#tax-type').attr('required', true);

It's working too. But, I want to make the field mandatory without JavaScripts. I tried adding the following by making the 'echo' to 0:

$new = array();
$new['required'] = true;
$mrg = array_merge($args, $new);
var_dump($mrg); //outputs 'required'=>1
$dd = wp_dropdown_categories( $mrg );
echo $dd;

I can also understand why it's not working. But is there a way I can achieve that without JavaScripts? Any filter? Please don't just say:

copy from the core and make your new one with that option.

And my second question is: Why the none_option's value is -1? Why not it's a '' (null)?

Answer 1

If you want to apply the required attribute every time you use wp_categories_dropdown, use wp_dropdown_cats filter as suggested in other answers:

add_filter( 'wp_dropdown_cats', 'wp_dropdown_categories_required' );
function wp_dropdown_categories_required( $output ){
    return preg_replace( 
        '^' . preg_quote( '<select ' ) . '^', 
        '<select required ', 
        $output 
    );
}

If you want to apply the required attribute only in especific situations, you can use wp_dropdown_categories with echo argument set to false, introduce the required attribute in the returned string and then echo:

$args = array(
    'show_option_none'   => __( 'Select one', 'text-domain' ),
    'taxonomy'           => 'my_tax',
    'id'                 => 'tax-type',
    'echo'               => false,
);

$cat_dropdown = wp_dropdown_categories( $args );

$cat_dropdown = preg_replace( 
        '^' . preg_quote( '<select ' ) . '^', 
        '<select required ', 
        $cat_dropdown
    );

echo $cat_dropdown;

Or maybe better, apply the filter combined with a custom required attribute:

add_filter( 'wp_dropdown_cats', 'wp_dropdown_categories_required', 10, 2 );
function wp_dropdown_categories_required( $output, $args ){

    if( isset( $args['required'] ) && $args['required'] ) {

       $output = preg_replace( 
            '^' . preg_quote( '<select ' ) . '^', 
            '<select required ', 
            $output 
       );

    }

    return $output;

}

And then use wp_dropdown_categories like this:

$args = array(
    'show_option_none'   => __( 'Select one', 'text-domain' ),
    'taxonomy'           => 'my_tax',
    'id'                 => 'tax-type',
    'required'           => true,
);

wp_dropdown_categories( $args );

About the second question, you should know that there is a "one question per thread" rule. Remember that for future questions. Than being said, -1 is the default value for option_none_value argument. This argument was not documented (now it is, I've added it to codex). You can override it as follow:

$args = array(
    'show_option_none'   => __( 'Select one', 'text-domain' ),
    'option_none_value'  => NULL,
    'taxonomy'           => 'my_tax',
    'id'                 => 'tax-type',
    'echo'               => false
);

PD: I'm not sure if NULL is a valid value for a option in a select element. Also, note that '' (empty string) is not the same that NULL. An empty string is a string data type with zero length; NULL is not any date type and has not data properties, it is nothing.

Answer 2

Update: WordPress 4.6

As from WordPress 4.6 we can add a 'required' attribute directly to wp_dropdown_categories().

<?php
$args = array(
    'show_option_none'   => __( 'Select one', 'text-domain' ),
    'taxonomy'           => 'my_tax',
    'id'                 => 'tax-type',
    'echo'               => 1,
    'required'           => true
);
wp_dropdown_categories( $args );

Source: Core Tract Ticket

Answer 3

There's a filter - wp_dropdown_cats (not documented anywhere as far as I know.)

It gives you two parameters, the HTML string and an array of the arguments supplied to wp_dropdown_categories, and you need to return the new HTML.

Answer 4

If you have a look into the function in wp-includes/category-template.php you will see, there is no option for 'required' build in. So we have to choose another way since $args['required'] doesn't work - as you know.

We find the filter 'wp_dropdown_cats', which provides us with the output just before the function returns this output. So we could work with this filter and alter "<select " to "<select required ":

add_filter( 'wp_dropdown_cats', 'wp_dropdown_categories_required' );
function wp_dropdown_categories_required( $output ){
    return preg_replace( 
        '^' . preg_quote( '<select ' ) . '^', 
        '<select required ', 
        $output 
    );
}

Regarding your second question:

Why the none_option's value is -1? Why not it's a '' (null)?

This is the standard value, which the function adds to the "none"-option. You can change this value with $args['option_none_value']. So for example:

$args = array(
    'show_option_none'   => 'test',
    'option_none_value'  => 'x'
);
wp_dropdown_categories( $args );

Reference: https://codex.wordpress.org/Function_Reference/wp_dropdown_categories

If you want to add the "required"-Attribute just to a specific select-field, you could add yourself a 'required'-Attribute, which you check in the filter:

    function show_pages(){
    $args = array(
        'show_option_none'   => 'test',
        'option_none_value'  => 'x',
        'required'           => true
    );
    wp_dropdown_categories( $args );
    }

    add_filter( 'wp_dropdown_cats', 'wp_dropdown_categories_required', 10, 2 );
    function wp_dropdown_categories_required( $output, $args ){
        if( ! isset( $args['required'] ) || $args['required'] != true )
            return $output;

        return preg_replace( 
            '^' . preg_quote( '<select ' ) . '^', 
            '<select required ', 
            $output 
        );
    }

All the best.