在没有 jQuery Validate 的情况下验证单选按钮组答案

【问题标题】：Validate Radio Button Groups Without jQuery Validate在没有 jQuery Validate 的情况下验证单选按钮组
【发布时间】：2013-03-14 08:50:20
【问题描述】：

我正在尝试在滑到下一组问题之前验证每张幻灯片上的表单。

除了单选按钮外，一切似乎都很好。如果未选中按钮，并且如果选中了答案，则我正在尝试向一组按钮添加一类“错误焦点”，除了 return $error = false;

这是http://www.foresightaus.com.au/form/的表格

    $nextBtn.click(function(e){

        e.preventDefault();
        var newIndex = 0,
            currentSlide = $slide.eq(currentIndex),
            $text = currentSlide.find($('li input[type="text"]')),
            $email = currentSlide.find($('#yourEmail')),
            $radio = currentSlide.find($('li.radio-btns')),
            formFields = currentSlide.find("input:text, li.radio-btns"),
            $error = true;  

        formFields.removeClass("error-focus");  

        //-----------------------------------------------------------------
        //-- Validate Text Fields

        $text.each(function(){

            if($(this).val()==""){

                //errorMessage("Please Enter Your Name");
                $(this).focus().addClass("error-focus");
                $error = true;

            }else{

                $error = false;

            }

        }); // end text each

        //-----------------------------------------------------------------
        //-- Validate Email Fields

        if($email.val()==""){

            //errorMessage("Please Enter Your Email Address");
            $(this).focus().addClass("error-focus");
            $error = true;

        }else if(!isValidEmail($email.val())){

            //errorMessage("Please Enter a Correct Email Address");
            $(this).focus().addClass("error-focus");
            $error = true;

        }else{

                $error = false;

        }

        //-----------------------------------------------------------------
        //-- Validate Radio Fields

        $radio.each(function(){

            if (!$(this).find(':checked')) {

               $(this).addClass("error-focus");
               $error = true;

            }

            else {

              $error = false;

            }

        }); // end radio each

        //-----------------------------------------------------------------

        if($error = false){

            if(currentIndex<lastIndex){
                newIndex = currentIndex+1;
            }

            slideToImage(newIndex); 

        }       

    });

    function isValidEmail(email) {
        var emailRx = /^[\w\.-]+@[\w\.-]+\.\w+$/;
        return  emailRx.test(email);
    }

【问题讨论】：

标签： javascript jquery forms radio-button validation

【解决方案1】：

您应该在每个单选组周围添加一个 div，如果未选中其中一个单选按钮，您应该只为该 div 提供您为其他字段提供的红色边框。一个例子：

HTML

<form>
<div id="group-1-wrapper">
<input type="radio">
<input type="radio">
</div>
</form>

js：

if(error) // your handling
$("#group-1-wrapper").addClass("error-focus");

【讨论】：

对不起，我的问题可能还不清楚，添加课程并不是我的问题，更重要的是，如果在问题一上说，当您点击发送“女性”即使它在同一个组中，仍然会添加课程
@ChrisG-Jones 所以将单选按钮组包装在div 标签中，然后检查是否至少有一个被从 div 标签中选中（本质上是分组他们）

【解决方案2】：

我尝试了几种不同的方法，但这对我有用。 @Evan 感谢您为我指明正确的方向

        //-----------------------------------------------------------------
        //-- Validate Radio Fields

        $radio.each(function(){

            if ($(this).find('input:radio').is(':checked')) {

                $error = false;

            }else{

                $(this).addClass("error-focus");
                $error = true;

            }

        }); // end radio each

【讨论】：