验证动态单选按钮jQuery - Validate dynamic radio buttons jQuery

问题：我无法验证动态创建的单选按钮。

问题：如何使用jQuery验证单选按钮？

是否可以自定义jQuery来验证动态创建的单选按钮？

有什么建议吗？

HTML和PHP来自我的表单

<label class="radio">
    <input type="radio" name='radnummer_varde[<?php echo $kk['radnummer'];?>]' value='1' <?php if (($hamta_formaga['radnummer_varde'] == '1')) echo 'checked="checked" '; ?>>
    <i class="rounded-x"></i>Prövas
</label>
<label class="radio">
    <input type="radio" name='radnummer_varde[<?php echo $kk['radnummer'];?>]' value='0' <?php if (($hamta_formaga['radnummer_varde'] == '0')) echo 'checked="checked" '; ?>>
    <i class="rounded-x"></i>Prövas ej
</label>

echo $kk['radnummer']是数字。

通过JS验证

var AbbRedigeraForm = function () {
    return {        
        initAbbRedigeraForm: function () {
            // Validation
            $("#redigera_abb").validate({
                // Regler för validation
                rules:
                {
                    'radnummer_varde[]':
                    {
                        required: true                      
                    },
                    aktiv:
                    {
                        required: true                      
                    },
                    arbetsomrade:
                    {
                        required: true,
                        minlength: 8,
                        maxlength: 30
                    },
                    syfte:
                    {
                        required: true                      
                    },
                    overgripande_mal:
                    {
                        required: true                      
                    },
                    undervisning:
                    {
                        required: true
                    },
                    redovisningsform:
                    {
                        required: true
                    },
                },
                // Messages for form validation
                messages:
                {
                    radnummer_varde:
                    {
                        required: 'Du måste ange detta.'                        
                    },
                    arbetsomrade:
                    {
                        required: 'Skriv en rubrik för arbetsområdet.'
                    },
                    syfte:
                    {
                        required: 'Skriv ett syfte.'                        
                    },
                    overgripande_mal:
                    {
                        required: 'Du måste ange övergripande mål.'
                    },
                    undervisning:
                    {
                        required: 'Du måste skriva något om undervisningen.'
                    },
                    redovisningsform:
                    {
                        required: 'Du måste skriva något om redovisning.'
                    },                  
                },      
                // Do not change code below
                errorPlacement: function(error, element)
                {
                    error.insertAfter(element.parent());
                }
            });
        }
    };
}();

编辑2015-03-27:

选项2

<label class="radio">
    <input type="radio" name='radnummer_varde[<?php echo $kk['radnummer'];?>]' value='1' <?php if (($hamta_formaga['radnummer_varde'] == '1')) echo 'checked="checked" '; ?>>
    <i class="rounded-x"></i>Prövas
</label>
<label class="radio">
    <input type="radio" name='radnummer_varde[<?php echo $kk['radnummer'];?>]' value='0' <?php if (($hamta_formaga['radnummer_varde'] == '0')) echo 'checked="checked" '; ?>>
    <i class="rounded-x"></i>Prövas ej
</label>
<script type="text/javascript"> 
    $(document).ready(function () {
    $('#redigera_abb').validate({});                                
    $('[name="radnummer_varde[<?php echo $kk['radnummer'];?>]"]').rules('add', {
        required: true,
        messages: {
            required: "At least one option needed."
        }
    }); 
    });                             
</script>

"是否可以自定义jQuery来验证动态创建的单选按钮？"

是的，这与向任何动态创建的元素添加验证没有什么不同。

首先，让我们检查一下代码的这一部分。。。

var AbbRedigeraForm = function () {
    return {        
        initAbbRedigeraForm: function () {
            // Validation
            $("#redigera_abb").validate({
                // Regler för validation
                rules:
                {
                    'radnummer_varde[]':
                    {
                        required: true                      
                    },
                    ....

通常不会将.validate()放入函数中。这不是测试方法。。。.validate()是初始化方法。因此，.validate()只进入DOM就绪处理程序内部，在该处理程序中，它被调用一次以初始化表单上的插件。否则，当您需要验证时，它还没有准备好，并且/或者.validate()方法被重复调用。
如果没有元素的精确name，则不能在.validate()的rules选项中声明规则。由于radnummer_varde[]并不是真正的name，因此此规则声明不起任何作用。
次要的一点，但您永远不应该在JavaScript中使用Allman风格的代码格式。为什么？因为JavaScript使用"自动分号插入"。这也让熟悉JavaScript更典型的1TBS格式的人更难阅读代码。

动态创建元素的解决方案。。。

选项1:只需将规则声明与元素内联，而不是使用.validate()中的rules选项。对于required规则，您可以使用class或HTML 5 required属性，如下所示。。。

<input type="radio" name='radnummer_varde[1]' class="required" ...

或

<input type="radio" name='radnummer_varde[1]' required="required" ...

由于某些类型的复杂规则需要无法内联设置的参数，因此存在局限性。这就是需要选择2的地方。

选项2:在动态创建输入元素后立即使用插件的.rules('add')方法（您还没有展示这些元素是如何"动态"创建的。）

// your code that dynamically creates the element
// declare the rule on the new element
$('[name="radnummer_varde[1]"]').rules('add', {
    required: true,
    messages: { // optional
        required: "custom message"
    }
});

选项3:您的元素并不是真正"动态"创建的，但您事先并不知道确切的name。使用"starts with"选择器获取所有这些元素，并使用jQuery .each()将该方法应用于所有元素。

$('[name^="radnummer_varde"]').each(function() {
    $(this).rules('add', {
        required: true,
        messages: { // optional
            required: "custom message"
        }
    });
});

注意：

无论您如何声明规则，每个输入都必须包含一个name属性。
.rules()的使用并不否定.validate()方法的使用。您必须已经在表单上调用了.validate()来初始化插件，然后才能调用.rules()。
如果附加到.rules()的选择器同时针对一组元素，则必须使用jQuery .each()函数，否则插件将只使用第一个匹配的元素。

"如何使用jQuery验证单选按钮？"

我注意到您的单选按钮HTML在某些条件下可能包含checked="checked"。请注意，如果单选按钮加载到选中的页面中，则无需进行验证，因为已经满足required规则。