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

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

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

首先，让我们检查一下你的代码......

var AbbRedigeraForm = function () {

    return {        

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

您通常不会将.validate()放在函数中。它的不测试方法...... .validate()是 初始化 方法。因此， .validate()只会进入DOM就绪处理程序，在该处理程序中，它会被调用一次来初始化表单上的插件。否则，在您需要时和/或重复调用.validate()方法时，验证尚未就绪。
如果您没有该元素的完全 rules，则无法在.validate()的{{1}}选项中声明规则。由于name实际上不是实际radnummer_varde[]，因此此规则声明不执行任何操作。
小点，但你绝不应该在JavaScript中使用Allman样式代码格式。为什么？因为JavaScript uses "Automatic Semicolon Insertion"。对于那些熟悉JavaScript更典型的1TBS格式的人来说，这也使代码更难阅读。

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

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

required

OR

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

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

选项2 ：之后立即使用plugin's .rules('add') method 动态创建输入元素。 （您尚未展示这些元素如何＆＃34;动态＆＃34;创建。）

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

选项3：您的元素并未真正创建＆＃34;动态＆＃34;，但您事先并不知道确切的// 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" } });。使用＆＃34;以＆＃34;开头选择器以获取所有这些元素，并使用jQuery name将该方法应用于所有元素。

.each()

备注：

无关紧要如何声明规则，每个输入必须包含$('[name^="radnummer_varde"]').each(function() { $(this).rules('add', { required: true, messages: { // optional required: "custom message" } }); });属性。

name的使用并不否定.rules()方法的使用。您必须先在表单上调用.validate()来初始化插件，然后才能拨打.validate()。

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

＆＃34;如何使用jQuery验证单选按钮？＆＃34;

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

验证动态单选按钮jQuery

1 个答案: