在提交时使用jQuery验证单选按钮

时间:2012-11-05 08:40:37

标签: javascript jquery forms validation

我想使用jQuery验证我的表单。 它有一组单选按钮。

我找到了一组单一的无线电按钮或解决方案的多种解决方案,你必须具体说明有哪些组名。

喜欢这里: Validate radio buttons with jquery?

问题是,表单是在运行时生成的。 问题保存在txt文件中(不要问,这是学校练习)。 生成的HTML代码如下所示:

<p>What&#039;s your gender? 

<input type="radio" name="gender" value="m" />Male 
<input type="radio" name="gender" value="f" />Female 

</p>

<p>

How satisfied are you with out support? 
<input type="radio" name="satisfaction" value="0%" />Not at all 
<input type="radio" name="satisfaction" value="25%" />Not very much 
<input type="radio" name="satisfaction" value="75%" />It was ok 
<input type="radio" name="satisfaction" value="100% />It was very satisfying

</p>

使用Twig生成js文件,因此可以遍历所有单选按钮组,但如果可能的话,我想避免这种情况。

2 个答案:

答案 0 :(得分:1)

您需要先添加所有组(页面加载会很好,但要确保组数组在全局范围内),然后在提交表单/单击按钮时单独验证每个组

var groups = [];
$(function() {
    $("input[type=radio][name]").each(function() {
      // Add the unique group name to the array
      groups[$(this).attr("name")] = true;
    });
});
$("button").click(function() {
    $.each(groups, function(i, o) {
      // For each group, check at least one is checked
      var isValid = $("input[name='"+i+"']:checked").length;
      alert(i + ": " + isValid);
    });
});

答案 1 :(得分:0)

我让它像这样工作

var groups = [];
$(function() {
    $("input[type=radio][name]").each(function() {
      // Add the unique group name to the array
      if (groups[groups.length - 1] != $(this).attr("name")) groups.push($(this).attr("name"));
    });
});
$('form').submit(function () {
    var isValid = true;

    $.each(groups, function(i, o) {
      // For each group, check at least one is checked
      if (isValid) isValid = $("input[name='"+o+"']:checked").length;  
    });

    if (!isValid) return false;

    return true;
});

感谢Blade0rz!