【问题标题】:Radio buttons not validating correctly单选按钮未正确验证
【发布时间】:2014-12-15 16:08:06
【问题描述】:

我有这份调查问卷,可用于启动应用程序。我在提交之前使用 javascript 进行验证,但我遇到了一个问题,它只验证每个问题的第二个按钮,而不是单独验证每个问题。我在下面发布了代码。

问卷调查

<?
    for($i = 1; $i <= count($questions); $i++){
        print "<div class='form-group'>";
            print "<div class='col-md-12'>";
                print "<p>$i) ".$questions[$i-1]."</p>";
                print "<label class='radio-inline'>";
                    print "<input type='radio' name='q$i' value='1'>Yes";
                print "</label>";
                print "<label class='radio-inline'>";
                    print "<input type='radio' name='q$i' value='-1'>No";
                print "</label>";
            print "</div>";
        print "</div>";
    }
?>

Javascript

$(function(){
    $('#questionaire-form').submit(function(e){
        e.preventDefault();
        var prevname = "";
        var questions = [];
        $('.radio-inline').each(function(){
            //$(this).next($(this)).is(':checked'));            
            var curname = $(this).find('input[type="radio"]').attr('name');
            if(prevname == curname){
                if(!$(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){
                    return true; //skip to the next element
                }else if(!$(this).find('input[name='+curname+']').is(':checked') && !$(this).closest('div').find('p').hasClass('text-danger')){
                    $(this).closest('div').find('p').addClass('text-danger');
                }else if($(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){
                    $(this).closest('div').find('p').removeClass('text-danger');
                }else{
                    $(this).closest('div').find('p').removeClass('text-danger');
                }
            }
            prevname = curname;
        });
        var go;
        $('.radio-inline').closest('div').find('p').each(function(){
            if($(this).hasClass('text-danger')){
                go = false;
                return false;
            }else{
                go = true;
            }
        });
        if(go){

        }
    });
});

如果需要,请询问更多信息。我已经被这个问题困扰了一段时间,我想尽快解决它。单选按钮验证一直是我的弱点,所以今天征服它会很棒

【问题讨论】:

  • 作为旁注:您应该真正了解模板机制以将您的视图与其他逻辑分开。
  • 您能否更深入地了解您的意思?我很好奇
  • 您到底想验证什么?只是为每个分组勾选了一个单选框?
  • 是的,这是正确的,我从来没有真正擅长验证单选按钮,我想通了一次,然后有一段时间没有这样做并忘记了 XD
  • 快速搜索给了我这个:smashingmagazine.com/2011/10/17/…

标签: javascript jquery validation


【解决方案1】:

这个怎么样:

var go = true;
$(".form-group").each(function () {
     if($(this).find('input[type="radio"]:checked').length == 0) {
         //nothing checked so error.
         $(this).find('p').addClass('text-danger');
         go = false;
     }
     else {
         $(this).find('p').removeClass('text-danger');

     }


});
if(!go)
{return false;}

//continue and do what you like

更新

在小提琴中测试:http://jsfiddle.net/6k0nusfb/

【讨论】:

  • nope 只有在选中 no 按钮时,段落上的红色才会消失
  • 啊,我想通了,我的旧代码中有一行额外的代码在摆弄东西。所以我理解它的方式是只要一组单选按钮共享相同的名称,它们都将共享相同的选中属性对吗?
  • 没错,但这段代码甚至不关心单选按钮的名称。该名称只是取消选中具有相同名称的另一个单选按钮。此代码循环到代表 1 个问题的 .form-group。然后选择它下面选中的每个单选按钮(.length 表示我在 DOM 中为该选择器创建了多少控件)。
  • 那么如果我想要检查的值,我只需使用名称,然后使用 .checked jquery 函数
  • 只需使用 .val()。它返回选中的值。
猜你喜欢
  • 1970-01-01
  • 2016-12-08
  • 1970-01-01
  • 2022-01-17
  • 2015-09-01
  • 2012-12-01
  • 2017-08-20
  • 2016-02-15
相关资源
最近更新 更多