繁体   English   中英

要求一个字段或另一个字段,但不能为空— Image或Radio Option

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

我正在寻找以下功能:

要求用户填写两个字段之一才能提交。

一个字段是图像上传。 另一个字段是单选下拉列表。 我要设置它,以便提交表格,必须选择以下选项之一,但不能两者都选,并且不能都为空。

我怎样才能通过jquery做到这一点? 原谅我,因为我对jQuery还是比较陌生的,并且仍在学习中。

我一直在考虑validate函数的路线,但是任何获得期望结果的方法都会很好。

做到这一点的一种好方法是允许用户单击两个按钮之一,从而给用户一个选择-然后,您将使用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. 目标受众中大多数人最容易接触的是什么?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM