验证动态单选按钮jQuery

Posted 2023-02-21

【中文标题】验证动态单选按钮jQuery

【英文标题】：Validate dynamic radio buttons jQuery

【发布时间】：2015-05-31 00:53:26

【问题描述】：

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

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

【参考方案1】：

“是否可以自定义 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 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"
        
    );
);

注意事项：

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

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

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

---

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

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

【讨论】：

首先：谢谢。选项 1 可以完成这项工作，但出于好奇，我也想尝试其他选项。选项 2 或选项 3 没有按预期工作。没有进行验证。请参阅上面我编辑的答案。

@Per76，您在编辑中发布的代码没有任何问题。您必须使用浏览器检查在浏览器源代码中呈现的代码。 name 可能没有按照您的预期呈现......有些东西不匹配。换句话说，我们正在处理一个 JavaScript 问题，所以我们并不真正关心任何 PHP。

@Per76，另外，我没有该代码块的上下文。如果您在运行.rules('add') 方法时没有触发.validate()，它将失败，可能会出现控制台错误。

对不起。但是我对 JavaScript 有点迷茫（如您所见）。我如何（以及在​​哪里）触发 .validate() ？似乎 .rules('add') 根本没有运行，也没有控制台错误。

您认为可以将“动态”规则添加到现有的验证功能（如上所示）吗？其余的验证（如 initAbbRedigeraForm 所示：）效果很好。我（几乎）是一个关于 JavaScript 的完整菜鸟。如何向该函数添加规则？