グループ入力の無線入力

Question

私はエラー状態の追加にほとんど問題はありません。私は7つのラジオ入力があり、提出後、私はグループの下で7つのエラー状態を得ました。

コードを変更する方法を理解する手助けをしてくれますか？

<form class="register-form"> 
       <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 margin-top-20"> 
        <h4 class="text-center"> TEST TEST</h4> 
        <div class="question-box"> 
         <p class="margin-top-20"><span class="red">*</span>1. QUESTION.</p> 
         <div class="col-lg-6 col-lg-offset-3 form-group text-center question"> 

          <div class="radio-item" > 
           <input type="radio" id="case1" name="case" value="0-50" required data-step2="1"> 
           <label for="case1">0 - 50</label> 
          </div> 

          <div class="radio-item"> 
           <input type="radio" id="case2" name="case" value="50-100" required data-step2="1"> 
           <label for="case2">50 - 100</label> 
          </div> 
          <div class="radio-item"> 
           <input type="radio" id="case3" name="case" value="100+" required data-step2="1"> 
           <label for="case3">Over 100</label> 
          </div> 
         </div> 
        </div> 
        <div class="question-box"> 
         <p class="margin-top-20"><span class="red">*</span>2. QUESTION</p> 

         <div class="col-lg-6 col-lg-offset-3 form-group text-center question"> 

          <div class="radio-item"> 
           <input type="radio" id="resell1" name="resell" value="1" required data-step2="1"> 
           <label for="resell1">YES</label> 
          </div> 
          <div class="radio-item"> 
           <input type="radio" id="resell2" name="resell" value="0" required data-step2="1"> 
           <label for="resell2">NO</label> 
          </div> 
         </div> 
        </div> 
        <div class="question-box"> 
         <p class="margin-top-20"><span class="red">*</span>3.QUESTION</p> 
         <div class="col-lg-6 col-lg-offset-3 form-group text-center question"> 
          <div class="radio-item"> 
           <input type="radio" id="export1" name="export" value="1" required data-step2="1"> 
           <label for="export1">YES</label> 
          </div> 
          <div class="radio-item"> 
           <input type="radio" id="export2" name="export" value="0" required data-step2="1"> 
           <label for="export2">NO</label> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-top-20 text-center"> 
        <button id="submit-registration" type="submit" class="btn btn-success radius send" >Continue</button> 
       </div> 
      </form> 

https://jsfiddle.net/13j34o0g/1

THX

Answer 1

私はあなたのコード内でいくつかのことを変更しましたし、私は、これはあなたが探しているものかもしれないと思います。

Example here

あなたinput'sなぜname属性による意志ループの下の最初のコード。それは3回だけ実行することを意味します

$(".invalid-info").remove(); // Removes the error messages before we run the validation. 
var group = {}; 
$('input[name^="case"], input[name^="resell"], input[name^="export"]').each(function(index) { 
    var $this = $(this); 
    var name = this.name; 
    if (!group[name]) { 
    group[name] = true; 
    if (!testRadio($this, options.showValidOnCheck)) validated = false; 
    } 
}); 

私は変更されました。

var value = $form.find('input[name="' + name + '"]').is(":checked"); 


if (!value) { 
    $('<p class="invalid-info" style="color: red">Please choose corect answer</p>').appendTo($($input).parent().parent()) 
    return false; 

} 

これがあなたが探していたものかどうか教えてください。