验证动态单选按钮jQuery

Question

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

问题：如何使用 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>

Answer 1

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

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

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

var AbbRedigeraForm = function () {

    return {        

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

1. 您通常不会将.validate() 放在函数内部。这不是测试方法....validate()是初始化方法。因此，.validate() 只进入一个 DOM 就绪处理程序，在该处理程序中调用一次来初始化表单上的插件。否则，验证在您需要时尚未准备好和/或.validate() 方法被重复调用。

2. 如果您没有元素的确切 name，则不能在.validate() 的rules 选项中声明规则。因为radnummer_varde[] 并不是真正的name，所以这个规则声明什么都不做。

3. 小问题，但你不应该在 JavaScript 中使用 Allman 样式的代码格式。为什么？因为JavaScript uses "Automatic Semicolon Insertion"。对于熟悉 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：在您动态创建输入元素之后立即使用plugin's .rules('add') method。 （您还没有展示这些元素是如何“动态”创建的。）

// 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。使用“开始于”选择器来获取所有这些元素，并使用 jQuery .each() 将方法应用于所有元素。

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

注意事项：

1. 无论您如何声明规则，每个输入必须包含name属性。

2. .rules() 的使用不会否定.validate() 方法的使用。您必须已经在表单上调用.validate() 来初始化插件，然后才能调用.rules()。

3. 如果附加到.rules() 的选择器同时定位一组元素，那么您必须使用jQuery .each() 函数，否则插件将只使用第一个匹配的元素。

---

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

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