次のスライドに移動する前にフォームフィールドを検証する方法

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をチェックアウトすることをお勧めします。