ASP.NET Form value validation scenario

Question

I have the following html in my ASP.NET form. It represents a dropdown menu to let the user choose his budget. When the user selects a value on the list. A jquery code copies the selected value in the ProjectBudget hidden field so it can be submited through the form.

<p><label>Project budget*</label></p>
<a href="#" class="SelectionDropdownMenu">Choose budget value</a>
<input id="ProjectBudget" class="inputDropdownValue" runat="server" type="hidden" />
<ul class="DropdownMenu">
    <li><a href="#">5 000 $ or less</a></li>
    <li><a href="#">5 000 $ - 10 000 $</a></li>
    <li><a href="#">10 000 $ - 25 000 $</a></li>
    <li><a href="#">25 000 $ - 50 000 $</a></li>
    <li><a href="#">50 000 $ - 100 000 $</a></li>
    <li><a href="#">100 000 $ or more</a></li>
    <li><a href="#">N.A.</a></li>
</ul>

This solution worked well for me in the past but I didn't have to make any validation on the field and using a unordered list gives more flexibility to our web designers over a DropDownList.

However I want to add ASP.NET validation to have the budget selection mandatory.

Besides using a DropDownList and use a RequiredFieldValidator. What are my options?

Answer 1

You can add a CustomValidator, set the ControlToValidate to the hidden dropdown. You can add a client script to validate client side..

Answer 2

It looks like you have a dependency on javascript, so why not use a standard DropDownList with the jquery ui selectmenu plugin or something similar which can give you the markup you are looking for and manages the <select> element behind the scenes. Then you can use the RequiredFieldValidator and have the markup you want for design flexibility.

As an added bonus, you kick the js dependency (at least for this item).