如何在移動到下一張幻燈片之前驗證表單域

Question

我正在構建分解爲幻燈片的表單。我想這樣做是爲了當用戶單擊箭頭移動到下一張幻燈片時，表單首先驗證他/她所輸入的信息是否對輸入字段有效。如果是這樣，它會繼續前進，如果沒有，它會通過一些視覺效果提醒用戶。

下面是代碼

$('.next').click(function() { 
    if(indexBG === 3){ 
     indexBG = 3; 
     $('#RF'+indexBG).css('display', 'block'); 
     $('#RF'+indexBG).fadeOut(500); 
     $('#RF'+indexBG).fadeIn(500); 
    } 
    else { 
      validateIt(); 
    } 
    function validateIt() { 
      if(!isValidEmailAddress($('#email-reg-input').val())) { 
       $('#email-reg-input').css("border","red solid thin"); 
      } 
      else { 
        $('#RG1').css('background-color','green'); 
        $('#RG1').html('33% Complete!'); 
      } 
      if($('#name-reg-input').val() == ''){ 
        $('#name-reg-input').css("border","red solid thin"); 
      } 
      else { 
        $('#name-reg-input').css("border","green solid thin"); 
      } 
    }; 
    }); 

Answer 1

表單驗證會變得非常棘手。尤其是當您考慮所有不同的用例和垃圾用戶的變體可以輸入時。因此，由於您已經在使用jQuery，因此您可能需要查看jQuery Validation Plugin。