JQuery验证与多组单选按钮

我有一个form确实提交了8个radio按钮中的1个到php$_POST超全局数组。因此，我需要一些验证。我是好心通过提供这个代码的伟大工程帮助：JQuery验证与多组单选按钮

$("#form").submit(function (event) { 

      if(!$(":radio:checked").length) { 

      alert("You must select at least one emotional state!"); 
      event.preventDefault(); 

      } 
     });

不过，我现在已经被要求有2套，其中用户选择2分的答案，而不是最初的1个回答8个radio按钮。我需要代码才能确定在提交表单之前，已从每组8个按钮中选择了至少一个radio按钮。代码检查是否有radio按钮被选中，然后只要选择了1个按钮，该功能即被满足并转换到下一页，这不是我想要的。

编辑

按钮代码：

<p><input type="radio" value="happy" name="perceived_emotion">Happy 
<input type="radio" value="excited" name="perceived_emotion">Excited 
<input type="radio" value="angry" name="perceived_emotion">Angry 
<input type="radio" value="frustrated" name="perceived_emotion">Frustrated 
<input type="radio" value="miserable" name="perceived_emotion">Miserable 
<input type="radio" value="sad" name="perceived_emotion">Sad 
<input type="radio" value="tired" name="perceived_emotion">Tired 
<input type="radio" value="relaxed" name="perceived_emotion">Relaxed</p> 

<p><input type="radio" value="happy" name="induced_emotion">Happy 
<input type="radio" value="excited" name="induced_emotion">Excited 
<input type="radio" value="angry" name="induced_emotion">Angry 
<input type="radio" value="frustrated" name="induced_emotion">Frustrated 
<input type="radio" value="miserable" name="induced_emotion">Miserable 
<input type="radio" value="sad" name="induced_emotion">Sad 
<input type="radio" value="tired" name="induced_emotion">Tired 
<input type="radio" value="relaxed" name="induced_emotion">Relaxed</p>

这里是form代码：

<form id="form" action="audio_handler.php?id=1" method="POST"> 

       <div id="perceived_emotions"> 
       <?php include("includes/induced_emotion_buttons.php"); ?>  
       </div> 

       <br /> 

       <div id="induced_emotions"> 
       <?php include("includes/perceived_emotion_buttons.php"); ?> 
       </div> 

       <p class="right"><input type="submit" name="submit" value="Submit"></p> 

      </form>

来源

2014-11-24 user1574598

我们需要更多的代码，例如：radio：checked来自哪里？请在页面上显示HTML和任何其他javascript/jquery：D – 2014-11-24 21:54:55

现在就编辑我的帖子。 – user1574598 2014-11-24 21:59:37

首先，您需要将单选按钮转换为复选框。 – 2014-11-24 22:13:55

你想要做的是结合:checked选择使用的JQuery的[name="value"]选择什么。所以你的新代码将是：

if(!$('input[name="perceived_emotion"]:checked').length) { 
    alert("You must select at least one perceived emotional state!"); 
    event.preventDefault(); 
    return false; 
} 

if(!$('input[name="induced_emotion"]:checked').length) { 
    alert("You must select at least one induced emotional state!"); 
    event.preventDefault(); 
    return false; 
}

所有这些包裹到表单事件。

编辑：由于您只想一次显示一个对话框，只需在每个if语句中添加return false;即可。

来源

2014-11-24 22:20:46

优秀:-)谢谢，工作一种享受。但是，我可能会将两个单独的对话框实际出现在网页上，因为弹出两次的警报框令人烦恼。请注意，我希望用户在每个页面上完成每个问题，因此根本没有消息弹出！ – user1574598 2014-11-24 22:35:29

@ user1574598看看我的编辑。 – 2014-11-24 22:37:34

我看到 - 我在阅读JQuery网站后认为'return false'等于'event.preventDefault（）;'？再次感谢，我将在早上尝试它，因为我现在已经关闭了所有的东西。 – user1574598 2014-11-24 22:45:43

JQuery验证与多组单选按钮

回答

相关问题