Question

处理表单验证函数，该函数生成空字段列表和错误填充字段列表。该脚本完美适用于文本和文本区域。当我将以下方法应用于单选按钮时：

$("input:radio[name]").each(function() {
    $(this).removeClass("error");     // Remove previously-applied error class
    if($(this).filter(":checked").length == 0) {       // Make sure they chose an option.
        emptys[j] = nameFix($(this).attr("name"));     // Add to array, apply error class
        $(this).addClass("error");                     // increment placeholder and exit
        j ++;                                          // the function
        return;
    } else {
        return;
    }
}); // end radio each

未答复的广播组在emptys生成2个索引，回答广播组产生1个索引（我在用户指示测试是通过还是失败的页面上进行测试）

到目前为止，我发现的普遍接受的答案都假设我将使用我在JS中提供<input>标签的特定属性。我所建的网站将有许多形式需要验证，所以我试图制作一个普遍适用的脚本来检查它们的有效性。

编辑：HTML样本

<tr>
        <td class="borderRight">Methane Overpressure</td>
        <td>Target Pressure &#40;psi&#41;</td>
        <td>300</td>
        <td>&#177; 1.0</td>
        <td class="input"><input type="text" name="Target-Pressure" class="num" size="2" maxlength="5"></td>
        <td class="input"><input type="radio" name="Target-Pressure-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Target-Pressure-Pass-or-Fail" value="0"></td>
    </tr>
    <tr>
        <td class="borderRight">Magnet</td>
        <td>Magnetic Field Strength &#40;T&#41;</td>
        <td>4.5</td>
        <td>&#177; 0.5</td>
        <td class="input"><input type="text" name="Magnetic-Field-Strength" class="num" size="2" maxlength="4"></td>
        <td class="input"><input type="radio" name="Magnetic-Field-Strength-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Magnetic-Field-Strength-Pass-or-Fail" value="0"></td>
    </tr>
    <tr>
        <td rowspan="2" class="borderRight">Acceleration</td>
        <td>Radio Frequency &#40;MHz&#41;</td>
        <td>68</td>
        <td>&#177; 0.1</td>
        <td class="input"><input type="text" name="Radio-Frequency" class="num" size="2" maxlength="5"></td>
        <td class="input"><input type="radio" name="Radio-Frequency-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Radio-Frequency-Pass-or-Fail" value="0"></td>
    </tr>

Answer 1

一种简单的方法（在您的问题中附加HTML之前编写）是：

function checkForChecked() {
        // use $.unique() to get the unique values from an array (created within),
        // gets all inputs of type="radio" with a 'name' attribute,
        // creates a map of those elements' names, uses 'get()' to make that a
        // real array
        var radioGroups = $.unique($('input[type="radio"][name]').map(function () {
            return this.name;
        }).get());

        // iterates over the array of group names ('a' is the current array element)
        radioGroups.forEach(function (a) {
            // caching the radio-inputs of the current name:
            var sel = $('input[type="radio"][name="' + a + '"]');
            // gets the parent elements of those radios (here the 'label' elements),
            // if there are no radio inputs checked we call the 'addClass' method,
            // otherwise the 'removeClass' method, and add/remove the 'requiredStill'
            // class. This can be adjusted to do otherwise as you need.
            sel.parent()[sel.filter(':checked').length === 0 ? 'addClass' : 'removeClass']('requiredStill');
        });
    }

    $('input').on('change', checkForChecked);

function checkForChecked() {

    var radioGroups = $.unique($('input[type="radio"][name]').map(function () {
        return this.name;
    }).get());

    radioGroups.forEach(function (a) {
        var sel = $('input[type="radio"][name="' + a + '"]');

        sel.parent()[sel.filter(':checked').length === 0 ? 'addClass' : 'removeClass']('requiredStill');
    });
}

$('input').on('change', checkForChecked);

label {
    display: block;
}
.requiredStill {
    border: 1px solid #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="c" />c</label>
<label>
    <input type="radio" name="c" />c</label>
<label>
    <input type="radio" name="c" />c</label>

参考文献：

addClass()。
Attribute-equals ([attribute="value"]) selector。
get()。
$.unique()。
map()。
parent()。
removeClass()。

Answer 2

为视觉参考添加错误元素的方法

 var radios = $mainElem.find(':radio');
    var radioNames={};
    radios.each(function(){
        radioNames[this.name] = true;
    });

    for( name in radioNames){
        var radioGroup=$mainElem.find('[name=' + name + ']');
        if( !radioGroup.filter(':checked').length ){
            radioGroup.parent().append('<span class="error">Ooooops</span>');
        }
    }

的 DEMO

Answer 3

这是按组成功分析无线电并允许脚本运行完成的代码段。

    var rgroup = new Array();
$(":radio").each(function() {
    rgroup[this.name] = true;
});
for (group in rgroup) {
    if (!!$(":radio[name=" + group + "]:checked").length) {
        $(":radio[name=" + group + "]").removeClass("error");
    } else {
        $(":radio[name=" + group + "]").addClass("error");
        emptys[j] = nameFix(group);
        j ++;
    }
}

我不知道为什么我无法得到David Thomas的工作答案，这篇文章写得非常好。我怀疑它与$ .unique拉起每一个单选按钮有关，因为正如charlieftl指出的那样，我确实给出了不同的答案二进制值（这样服务器就可以使用了）。虽然我的脚本甚至没有达到构建错误消息的程度（甚至拒绝提交）。我想，当我最终构建一个使用它们的表单时，我能够将这种技术扩展到复选框。

感谢您帮助我完成这项工作，我对您的援助质量和速度印象深刻。现在停止工作......

使用jQuery检查名称未知时检查的所有无线电组

3 个答案: