组无线电输入验证(group radio inputs validation)

组无线电输入验证(group radio inputs validation)

我遇到了附加错误状态的小问题。 我有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

谢谢

I got little problem with append error state. I got 7 radio inputs and after submit I got 7 error states under group.

Could some one help me figure out how to modify the code.

<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

最满意答案

我在你的代码中改变了一些东西，我认为这可能是你正在寻找的东西。

示例在这里

下面的第一个代码将循环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; }

让我知道这是你在找什么。

I've changed a few things in your code and i think this might be what you are looking for.

Example here

The first code below will loop through you input's why the name attribute. that means it will only run it 3 times

$(".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; } });

And i changed.

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; }

Let me know if this is what you were looking for.