驗證單選按鈕組沒有jQuery驗證

我想在滑動到下一組問題之前驗證每張幻燈片上的表單。驗證單選按鈕組沒有jQuery驗證

除了單選按鈕外，其他所有方面都可以。我試圖給一組按鈕添加一個'error-focus'類，如果一個按鈕沒有被選中，並且如果答案被選中，除了返回$ 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\.-][email protected][\w\.-]+\.\w+$/; 
     return emailRx.test(email); 
    }

來源

2013-03-24 Chris G-Jones

您應該添加一個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");

來源

2013-03-24 23:55:20

對不起我的問題可能沒有明確，該類的加入是不是真的我的問題更是，如果在問題一說，你已經檢查了「男性「選項當你點擊發送」女性「時，即使它在同一組中，仍然會添加該類。 – 2013-03-25 00:02:44

@ ChrisG-Jones因此，將單選按鈕組合在一個'div'標記中，然後檢查是否在至少一個是從* div標籤內檢查*（實質上是將它們分組） – 2013-03-25 00:32:12

我嘗試了幾種不同的方法，但這個工作對我來說。 @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

來源

2013-03-25 00:39:38

驗證單選按鈕組沒有jQuery驗證

回答

相關問題