要求一個字段或另一個字段，但不能為空— Image或Radio Option

Question

我正在尋找以下功能：

要求用戶填寫兩個字段之一才能提交。

一個字段是圖像上傳。 另一個字段是單選下拉列表。 我要設置它，以便提交表格，必須選擇以下選項之一，但不能兩者都選，並且不能都為空。

我怎樣才能通過jquery做到這一點？ 原諒我，因為我對jQuery還是比較陌生的，並且仍在學習中。

我一直在考慮validate函數的路線，但是任何獲得期望結果的方法都會很好。

Answer 1

做到這一點的一種好方法是允許用戶單擊兩個按鈕之一，從而給用戶一個選擇-然后，您將使用JQuery根據用戶選擇的選項來顯示/隱藏正確的選項。 這意味着在任何時候都只有一個選項可見。 具有以下優點：

1. 用戶不能輕易地同時填寫這兩個選項（如果他們做兩次工作而系統拒絕它，則用戶不太可能感到困惑/沮喪）。
2. 如果用戶沒有JS，則瀏覽器將僅顯示兩個選項並帶有通知（請參見我的示例）。
3. jQuery非常好用和簡單，在IE /非主流瀏覽器上不會輕易中斷。

這是我的操作方法（未經測試但應該可以工作）。

# 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();
});

通常，在選擇任何方法時都需要考慮以下幾點：

1. 對於可能是新手/匆忙/不專心的用戶，最清晰的系統是什么？
2. 造成挫敗的可能性最小的是什么，特別是通過使用戶執行后來被您拒絕的工作來？ （解決方案：對其進行設計以自然產生所需的結果。）
3. 目標受眾中大多數人最容易接觸的是什么？