Design to handle combo mandatory input field

Question

I have a screen where the button will only enable when either one of the field (Field A or Field B) is entered. However, I'm stuck when designing for the combo field (Field B - in screenshot below) where i have to do a check that both of the input fields in Field B have to be entered for it to be valid. How should I design it in a way that it is clear enough that they have to filled up both input field in order to proceed on?

Answer 1

I think you should view the combo field as three separate elements.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Keeping them within a visual container, like in your example, will show their relationship.

Answer 2

There are some suggestions you can try:

• Change the border of those fields to red (or mark them in other way), and comment below that fields with red border are required.
• It seems like if they are trying to submit the form without entering the required data to those fields, the submission will fail. You can inform them that these fields are required by changing their border to red only in the end, when the submission is failing, like GMAIL does.
• You can circle both the required fields with a border and give the entire border a title.

In my opinion, I prefer the first two options, but the last one seems OK, too.