javascript - このJavaScriptフォーム検証DRYerを作成するにはどうすればよいですか？

Question

ユーザーは、3つの入力「カテゴリ」のそれぞれから1つの無線を選択する必要があります。彼がそうせずに「提出」した場合、彼は警告を受け取ります：

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!"); 
   } 
});

これは、より大きなコードの簡略版です。各入力名を詳細にチェックしないように、条件をより効率的に書き直すにはどうすればよいですか？（複数の入力名カテゴリがチェックされていない場合でも、「送信」ごとに1つの「警告」のみが表示されます。）マークアップの編集は問題ありません。

ありがとう！

Answer 1

同様のグループに動作を適用する場合は、IDではなくクラスについて考え始める必要があります。このソリューションでは、個別のデータ名は必要ありませんが、html IDとは別のデータを使用する方がよいと思いますが、これを使用できます。必要に応じて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;
      }
   });
});

Answer 2

function validationCheck() {
    var isValid = true,
        errorText = "";
    $("form div").each(  //get the divs that hold the radios and loop
    //$("#color, #shape, #size").each( //could do it by ids of the divs also
        function(){
            var div = jQuery(this),  //div reference
                isChecked = div.find('input[type="radio"]:checked').length>0;  //see if we have anything selected
            if (!isChecked) {  //if no selections, show error message
                isValid = false;  //set validation to false
                errorText = "Oops! Please choose a " + div.prop("id") + "!";  //build error message
                return false;  //exit each loop
            }
        }
    );
    $('#warning').text(errorText); //set error message
    return isValid;
}

Answer 3

$('#link').on('click', function(){
  $('#color, #shape, #size').each(function(i, ele){
      if($(this).find('input:checked').length == 0)
        $('#warning').text("Oops! Please choose a " + this.id + "!");
  });
}); 

jsFiddle

ユーザーが入力を選択しない場合、または入力を1つだけ選択した場合に備えて、警告メッセージの生成を検討することをお勧めします。

この例では、ユーザーは次のようなメッセージを受信しますOops! Please choose a color, and shape!

$('#link').on('click', function(){
  var msgs = [];

  $('#color, #shape, #size').each(function(i, ele){
    if($(this).find('input:checked').length == 0)
      msgs.push(this.id);
  });

  if(msgs.length > 0)
    $('#warning').text("Oops! Please choose a " + msgs.join(", and "));
}); 

jsFiddle