Real time form validation not working with all inputs

[kaosjon]

Hi, i am trying to add some realtime form validation for my registration page, however only my email input is displaying the either correct or error output that it should, and neither my username or password are, I have tried for the past couple of hours to see what is wrong, but i just can't find any errors in the code that would be the cause. Hoping that someone can see the error.

FORM CODE

Copy code
<div id="overlay">
  <div id="modal_wrapper">
          <div id="modal_content">

           <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>

                </div><!---end modal_content_left--->

                <div id="modal_content_right">

                <!--<li class="required double" type="none">-->

 Payment Type
 <div id="payment_options">

 <p>
   <label><img src="images/index/images/paypal.png" width="78" height="38" alt="PayPal" />
     <br />
                                <input type="radio" name="payment_selection" value="paypal" id="payment_selection_0" checked/>
     </label>

   <label><img src="images/index/images/alertpay.png" width="78" height="38" alt="Alertpay" />
                              <br />
     <input type="radio" name="payment_selection" value="alertpay" id="payment_selection_1" />
     </label>

   <label><img src="images/index/images/check.png" width="78" height="38" alt="Check" /><br />
     <input type="radio" name="payment_selection" value="check" id="payment_selection_2" />
     </label>

              </p>
   <br /><br /><br /><br />
                        Account Type

                        <p>
                          <label><img src="images/index/images/demo.png" width="78" height="38" alt="Demo" />
                          <br />
                            <input type="radio" name="account_type" value="demo" class="demo_radio" id="account_type_0" />
                            </label>

                          <label><img src="images/index/images/real_account.png" width="78" height="38" alt="Real" /><br />
                            <input type="radio" name="account_type" value="real" id="account_type_1" checked/>
                          </label>

                        </p>
 </div><!---end payment_options---><br /><br /><br />

                  <div id="final_reg">
                  <div id="check_boxes">
                  <p>
                  <li class="required" type="none">
                    <label>
                      <input type="checkbox" name="agree_cons" value="terms" id="agree_cons_0" />
                      I agree to Terms</label>
                    <br /><br />
                    <label>
                      <input type="checkbox" name="agree_cons" value="privacy" id="agree_cons_1" />
                      I agree to Privacy Policy</label>
                      </li>

                    <br />
                  </p></div><!---end check_boxes--->
                  <div id="register_submit">
<input name="submit" type="submit" class="register_submit" id="register_submit" alt="Register" /></div><!---end register_submit---></div><!---end final_reg---></div><!---end mofal_content_right--->







            </form>




          </div><!---end modal_content--->
          <div id="error_display"></div><!---end error_display--->
     </div><!---end modal_wrapper--->   
</div><!---end overlay--->

JQUERY CODE

Copy code
// 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');
            }

        },














    };


//    $('#send').click(function (){
//        var obj = $.browser.webkit ? $('body') : $('html');
//        obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
//            jVal.errors = false;
//            jVal.firstName();
//            jVal.lastName();
//    /*        jVal.userName();*/
//            jVal.email();
//            jVal.paypalEmail();
//            jVal.kingdomName();
//            jVal.kingdomMotto();
//            jVal.referal();
//            jVal.agree();
//        });
//        return false;
//    });

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

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

And i have some css for it

Copy code
#modal_content_left .error, #modal_content_right .error {
 border:1px solid red; 
}
#modal_content_left .correct, #modal_content_right .correct {
 border:1px solid #2BFF2B;
} 

Thanks for all your help

[tmash]

Is it posible to post a link to your sample page?....it might help to spot the error quickly?

[kaosjon]

Umm, well its run of a local server at the moment on my own computer, how would i do it without actually hosting, teamview?