组无线电输入验证

时间:2017-05-10 08:02:05

标签: javascript jquery

我的附加错误状态没什么问题。我有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

1 个答案:

答案 0 :(得分:0)

我已经更改了代码中的一些内容,我认为这可能就是您要找的内容。

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;

}

如果您正在寻找,请告诉我。