javascript - 我怎样才能使这个 javascript 表单验证 DRYer？

Question

用户必须从三个输入“类别”中的每一个中选择一个 radio 。如果他没有这样做就“提交”，他会收到警告:

http://jsfiddle.net/bqyvS/

像这样的标记:

<form>
    <div id="color">
        <input type="radio" name="color" id="blue">
        <label for="blue">Blue</label>
        <input type="radio" name="color" id="red">
        <label for="red">Red</label>
        <input type="radio" name="color" id="green">      
        <label for="green">Green</label>
    </div>
    <div id="shape">
        <input type="radio" name="shape" id="square">
        <label for="square">Square</label>
        <input type="radio" name="shape" id="circle">
        <label for="circle">Circle</label>
        <input type="radio" name="shape" id="triangle">
        <label for="triangle">Triangle</label>
    </div>
    <div id="size">
        <input type="radio" name="size" id="small">
        <label for="small">Small</label>
        <input type="radio" name="size" id="medium">
        <label for="mediume">Medium</label>
        <input type="radio" name="size" id="large">      
        <label for="large">Large</label>
    </div>
  </form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​

Javascript:

$('#link').on('click', function() {
   if (!$('#color input[type=radio]:checked').length) {
      $('#warning').html("Oops! Please choose a color!"); 
   }
   else if(!$('#shape input[type=radio]:checked').length) {
      $('#warning').text("Oops! Please choose a shape!"); 
   }
   else if(!$('#size input[type=radio]:checked').length) {
     $('#warning').text("Oops! Please choose a size!"); 
   } 
});

这是一段较大代码的简化版本。我怎样才能更有效地重写条件，这样我就不会冗长地检查每个输入名称？ (即使未选中多个输入名称类别，每个“提交”也应该只显示一个“警告”。)编辑标记就可以了。

谢谢!

Answer 1

将行为应用于相似的组时，您应该开始考虑类而不是 ID，在此解决方案中，您不需要单独的数据名称，但我认为将数据与 html id 分开会更好，但您可以如果愿意，请使用 this.id

<form>
    <div id="color" class="selection-group" data-name="color">
        <input type="radio" name="color" id="blue">
        <label for="blue">Blue</label>
        <input type="radio" name="color" id="red">
        <label for="red">Red</label>
        <input type="radio" name="color" id="green">      
        <label for="green">Green</label>
    </div>
    <div id="shape" class="selection-group" data-name="square">
        <input type="radio" name="shape" id="square">
        <label for="square">Square</label>
        <input type="radio" name="shape" id="circle">
        <label for="circle">Circle</label>
        <input type="radio" name="shape" id="triangle">
        <label for="triangle">Triangle</label>
    </div>
    <div id="size" class="selection-group" data-name="size">
        <input type="radio" name="size" id="small">
        <label for="small">Small</label>
        <input type="radio" name="size" id="medium">
        <label for="mediume">Medium</label>
        <input type="radio" name="size" id="large">      
        <label for="large">Large</label>
    </div>
  </form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​

Javascript:

$('#link').on('click', function() {
   $('.selection-group').each(function() {
      if(!$(this).find('input[type=radio]:checked').length) {
          $('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!"); 
          return false;
      }
   });
});