Require one field or the other but CANNOT be left blank — Image or Radio Option

Question

I am looking for the following functionality:

The user is required to fill in either one of two fields to be able to submit.

One field is an Image Upload. The other field is a radio dropdown list. I want it set so that in order to submit the form, ONE of these options must be chosen but NOT both and BOTH cannot be blank.

How can do I possibly do this through jquery? Forgive me as I am relatively new to jquery and am still learning.

I was thinking along the lines of the validate function but any way to get my desired result would be nice.

Answer 1

One good way to do this would be to give the user a choice by allowing him/her to click one of two buttons - you would then use JQuery to reveal/hide the right option based on the option they picked. This means only one option is visible at any time. This has these advantages:

1. The user cannot as easily fill in both options (it's less likely the user will get confused/frustrated if they do twice the work and the system rejects it).
2. If the user doesn't have JS the browser will just display both options with a notice (see my example).
3. The Jquery is nice and simple and it won't break as easily on IE/non-mainstream browsers.

Here's how I would do it (untested but should work).

# view
<button type="button" id="choose_image">Upload an image</button>
<button type="button" id="choose_radio">Choose from list</button>
<div id="noJS">
  Please only complete ONE of these two options.
</div>
<div id="image">
   ...
</div>
<div id="radio">
  ...
</div>

# Jquery
$(document).onload( function(){
  $('#noJS').hide();
  $('#radio').hide();
})
$('#choose_image').click( function(){
  $('#radio').hide(); // or slideToggle() or fadeOut() etc.
  $('#image').show();
});
$('#choose_radio').click( function(){
  $('#radio').show();
  $('#image').hide();
});

In general, there are a few considerations here in whatever approach you choose:

1. What is the clearest system for a user who might be new/rushing/not paying attention?
2. What is least likely to cause frustration, especially by making a user do work that you later reject? (Solution: engineer it to naturally incur the result you want.)
3. What is the most accessible to the most people in your target audience?