验证动态单选按钮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
规则。
- jquery 单选按钮更改问题
- Bootstrap/JQuery-单选按钮组事件函数
- Jquery 单选按钮重复
- 一次取消选中所有JQuery单选按钮集
- 悬停时的 jQuery 单选按钮值
- jQuery单选按钮检查操作不'不要开火
- struts2与jquery单选按钮事件问题
- jquery单选按钮,以及另外两个小问题
- Jquery单选按钮逻辑
- jQuery-单选按钮单击()
- jQuery单选按钮onChange不起作用
- 使用自定义jQuery单选按钮与CakePHP表单助手
- 奇怪的jQuery单选按钮显示/隐藏bug
- Jquery单选按钮选择器
- jQuery单选按钮更改不起作用
- JQuery单选按钮值检查
- jquery单选按钮未切换
- jQuery单选按钮上的奇怪行为
- 在 IE6 中未选择 JQuery 单选按钮
- jQuery单选按钮功能不能正常工作