Custom Fields - Dropdowns (Require?)

Is it possible to make a drop down field "required"? Perhaps when it's presented it starts with something like

--Choose--

but they must select an option, or even if it's blank? I am looking for this for some custom fields on tickets, and the problem is most of the time they ignore that since it's not required.

I guess the question would be then how to start with the field being blank then to make them select something?

Perhaps someone has done this already? What I really need this for is support tickets rather than product or client custom fields.

I think that you might be able to do it without resorting to jquery/ajax by tweaking my code from the thread below...

http://forums.whmcs.com/showthread.php?95835-Support-Ticket-Custom-fields-read-only&p=401942#post401942

in *template*/supportticketsubmit-steptwo.tpl, replace...

{$customfield.input} {$customfield.description}

with...

{$customfield.input|replace:'<select ':'<select required '} {$customfield.description}

what that will do is make all dropdowns in support tickets required by default.

if you only have the one dropdown field, then that's not important - but if you use dropdowns in other support tickets (or multiple dropdowns in the same department) that you don't want to be required, then you may need an {if} statement to specify which ones are required.

{if $customfield.id eq "41"}{$customfield.input|replace:'<select ':'<select required '}{else}{$customfield.input}{/if} {$customfield.description}

there are two other important steps to remember when setting up the custom field in the support ticket department.

1. tick the checkbox to make the dropdown custom field required - while this will have no effect on forcing the dropdown to be required, it will display an error in the error box if a valid option is not selected from the dropdown.

NB: if WHMCS used the required checkbox value to automatically add "required" to the select tag, then you wouldn't need to make the above template modification!

though in fairness, that might be down to the feature only being introduced in HTML5 and probably not all browsers supported it initially.

2. in the "Select Options" box, make the first entry a space - e.g, if you want two dropdown options (Yes & No), use the following...

 ,Yes,No

as long as you've ticked the required box in the custom field setup, the form shouldn't accept a space as being a valid entry and will require one of the other options to be selected before the ticket can be submitted - this should work on all modern browsers, including IE10 and later... it's possible that older browsers (perhaps IE9?) might ignore the required field - so if that's going to be an issue, then you may need to consider using jquery/ajax as John suggested.

if you don't want to use a *space* as the opening selection, but would prefer to use some other text, e.g "--Choose--", you can - but you would then need to modify the Smarty in the template further to make the value of that option entry equal to a *space*.

{$customfield.input|replace:'<select ':'<select required '|replace:' value="--Choose--"':' value=" "'} {$customfield.description}

again, you can wrap this if an {if} statement if you only need it for specific custom fields.

Wow this is awesome! Thanks so much! I had hoped there was an easy fix such as this!

Hello Brian, Can we achieve this for Dropdowns in Cart > Configurable Options

17 hours ago, Safir Hosting said:

Hello Brian, Can we achieve this for Dropdowns in Cart > Configurable Options

wouldn't configurable options dropdowns always pass a value anyway?

Hello Brian,

I've resolved it by editing configureproduct.tpl with below code

{if $configoption.optiontype eq 1}
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                <select name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" class="form-control" required>
                                                <option disabled selected value>--- Please Select an Option ---</option>
                                                    {foreach key=num2 item=options from=$configoption.options}
                                                        <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id}{/if}>
                                                            {$options.name}
                                                        </option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </div>

11 hours ago, Safir Hosting said:

I've resolved it by editing configureproduct.tpl with below code

that if statement in the middle of the code is now irrelevant, e.g it will do nothing even if the condition is met.

Hello Brian,

When cart loaded the screen like below

And on checkout like below

I couldn't get what is the problem here.

Regards

21 minutes ago, Safir Hosting said:

I couldn't get what is the problem here.

isn't it working as you intended - the user now has to choose an option from each dropdown and gets a warning if they don't ?

Yes it is working as expected, customer cannot proceed to checkout if he/she don't choose an option from dropdowns