Question

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

除了单选按钮外，一切似乎都没问题。我试图在没有选中按钮的情况下向一组按钮添加一组“错误焦点”，如果选中了答案，除了返回$ 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);
    }

Answer 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");

Answer 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

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

2 个答案: