一部の入力にリアルタイムフォームの検証が表示されない

Question

登録ページのリアルタイムフォームの検証を追加しようとしていますが、メールの入力に正しいかエラー出力が表示されています。私は間違っているかどうかを見るために過去2〜3時間努力しましたが、原因となるコードには何の誤りも見つけられません。誰かがエラーを見ることができますように願っています。

フォームコード

<form id="jform" action="" method="post" enctype="multipart/form-data"> 
       <div id="modal_content_left"> 
       Register 

       <ul> 

        <li class="required" type="none"> 

         <label> 

          <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/> 

         </label> 

         <label> 
          <br /> 
          <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/> 

         </label> 
         <label> 
          <br /> 
          <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/> 

         </label> 


         <label> 
          <br /> 
          <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/> 
         </label> 
        </li> 


       </ul></form> 

jQueryのコード

// JavaScript Document 

$(document).ready(function(){ 
    jVal = { 

      'username' : function() { 

      $('body').append('<div id="usernameInfo" class="info"></div>'); 

      var ele = $('#username'); 
      var pos = ele.offset(); 



      var patt = /^(?=.*[a-z].*)\w{8,}$/i; 

      if(!patt.test(ele.val())) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 
     }, 




     'email' : function() { 

      $('body').append('<div id="emailInfo" class="info"></div>'); 

      var ele = $('#email'); 
      var pos = ele.offset(); 



      var patt = /^.+@.+[.].{2,}$/i; 

      if(!patt.test(ele.val())) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 
     }, 

     'password' : function(){ 

      $('body').append('<div id="passwordInfo" class="info"></div>'); 


      var ele = $('#password'); 
      var pos = ele.offset(); 


      if(ele.val().length < 6) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 

     }, 





    $('#username').change(jVal.username); 
    $('#email').change(jVal.email); 
    $('#password').change(jVal.password); 

    $('input[name="agree_cons"]').change(jVal.agree); 
}); 

Answer 1

あなたのコードには何の問題もありません。これは、jQueryとjQuery UIを組み込むと機能します。

ここでは動作しますfiddleです。私が作ったのみの変更は以下の通りであった。

1. はjQueryの
2. を含めるjQueryのUIを含めます。
3. あなたがあなた自身のコード内でそれらのもののすべてをやっている、とあなたが期待する結果を取得する必要があります.correctと.error

ダブルチェックのためのCSS宣言を追加します。