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
