如何在多步 jquery 中添加表单步骤验证（带单选按钮）答案

【问题标题】：How to add form step validation in multi step jquery from (With radio buttons)如何在多步 jquery 中添加表单步骤验证（带单选按钮）
【发布时间】：2015-01-11 10:21:43
【问题描述】：

我正在使用这个确切的示例代码（除了我添加了另外 2 个表单步骤）：

LINK TO SAMPLE FORM

我所有的步骤都是单选按钮（不是文本框）（每个表单页面 2 个单选按钮）。如何验证单个表单页面，以便如果未选择单选按钮，则表单不会前进，理想情况下为用户提供反馈以选择单选按钮？现在，即使没有像在演示中那样进行任何字段或选择，表单也会前进。（见上面的链接）

提前致谢！

【问题讨论】：

标签： javascript jquery forms twitter-bootstrap css

【解决方案1】：

在 next_fs 变量声明 next_fs = $(this).parent().next(); 下的 $(".next").click 函数中，您可以尝试以下操作：

if (current_fs.find('input:radio:checked').length == 0) {
    // Add error message handling here
    return false;
}

这将查看当前帧中是否有任何单选按钮被选中，如果没有，则取消按钮单击事件。您还可以在返回 false 之前弹出错误消息。

我没有重新创建和测试它，因为试图强迫自己阅读那一大堆代码已经很痛苦了，但我认为这会对你有所帮助。如果它不起作用，请告诉我。

【讨论】：

谢谢布莱斯，我现在就试一试！我会让你知道它是怎么回事:)
试过了，它完全停止工作。控制台中没有错误，下一步按钮不会随着添加的代码前进。这是脚本顶部的副本，其中包含我添加的代码： $(".next").click(function () { if (animating) return false; animating = true; current_fs = $(this).parent( ); next_fs = $(this).parent().next(); if (current_fs.find('input:checkbox:checked').length == 0) { // 此处添加错误信息处理 return false; }
对不起。一定很晚了。我以为你说的是复选框而不是单选按钮。我会得到固定的答案
试一试。将选择器从 input:checkbox:checked 更改为 input:radio:checked
谢谢布莱斯！我们越来越近了。您需要选中单选按钮才能继续前进。唯一的问题是：如果您先点击提交，然后点击下一页，页面将不会向前移动，那么您选择一个单选按钮并点击下一页，页面将不会向前移动。所以基本上，如果你没有先选中单选按钮，然后点击下一步...之后选择单选按钮将不起作用。所以我需要刷新页面并首先进行选择才能继续。有什么想法吗？再次感谢。

【解决方案2】：

您是否尝试过使用“必填”字段？这可能会有所帮助。例如：

输入类型=“文本”占位符=“输入名称”需要

【讨论】：

就像我在上面的帖子中提到的那样。我只使用单选按钮（不是文本字段），并且我确实尝试了“必需”属性，但是一旦您单击带有“.next”类的下一个按钮，jquery 脚本就会运行并加载下一个字段集。