組收音機輸入驗證

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; 

} 

讓我知道這是你在找什麼。