JavaScript registration validation error?
I have the following JavaScript running for my registration validation but everytime I enter something it returns the username_ok as undefined, and every other *_ok item. The function is meant to run after it has been defined so I can actually allow the user to register but it fails to define it.
Could somebody help me please? I would like to keep the same format of code and just get the submit_check() function working.
$(document).ready(function() {
var min_chars = 4;
var characters_error = 'Minimum amount of chars is 4';
var checking_html = 'Checking...';
$('#username').keyup(function(){
if($('#username').val().length < min_chars){
$('.username_error').html(characters_error);
$('.username_error').css('color', 'red');
$('#username').css('color', 'red');
$('#username').css('border', '1px solid red');
}else{
$('.username_error').html(checking_html);
$('.username_error').css('color', '#DDDDDD');
$('#username').css('color', '#DDDDDD');
$('#username').css('border', '1px solid #DDDDDD');
check_availability();
}
});
});
function check_availability(){
var username = $('#username').val();
$.post("./includes/check-user.php", { username: username },
function(result){
if(result == 1){
$('.username_error').html('The username ' + username + ' is Available');
$('.username_error').css('color', 'green');
$('#username').css('color', 'green');
$('#username').css('border', '1px solid green');
var user_ok='1';
submit_check();
}else{
$('.username_error').html('The username ' + username + ' is not Available');
$('.username_error').css('color', 'red');
$('#username').css('color', 'red');
$('#username').css('border', '1px solid red');
}
});
}
$(document).ready(function() {
var min_chars_name = 4;
var characters_error_name = 'Please enter atleast 4 chars.';
$('#fname').keyup(function(){
if($('#fname').val().length < min_chars_name){
$('.fname_error').html(characters_error_name);
$('.fname_error').css('color', 开发者_开发百科'red');
$('#fname').css('color', 'red');
$('#fname').css('border', '1px solid red');
}else{
$('.fname_error').css('color', 'green');
$('#fname').css('color', 'green');
$('#fname').css('border', '1px solid green');
$('.fname_error').html('');
var fname_ok='1';
submit_check();
}
});
});
$(document).ready(function() {
var min_chars_name = 4;
var characters_error_name = 'Please enter atleast 4 chars.';
$('#lname').keyup(function(){
if($('#lname').val().length < min_chars_name){
$('.lname_error').html(characters_error_name);
$('.lname_error').css('color', 'red');
$('#lname').css('color', 'red');
$('#lname').css('border', '1px solid red');
}else{
$('.lname_error').css('color', 'green');
$('#lname').css('color', 'green');
$('#lname').css('border', '1px solid green');
$('.lname_error').html('');
var lname_ok='1';
submit_check();
}
});
});
$(document).ready(function() {
$('#birthd').change(function(){
if($('#birthd').val() == '0'){
$('#birthd').css('color', 'red');
$('#birthd').css('border', '1px solid red');
}else{
$('#birthd').css('color', 'green');
$('#birthd').css('border', '1px solid green');
var birthd_ok='1';
submit_check();
}
});
});
$(document).ready(function() {
$('#birthm').change(function(){
if($('#birthm').val() == '0'){
$('#birthm').css('color', 'red');
$('#birthm').css('border', '1px solid red');
}else{
$('#birthm').css('color', 'green');
$('#birthm').css('border', '1px solid green');
if($('#birthd').val() == '0'){
$('#birthd').css('color', 'red');
$('#birthd').css('border', '1px solid red');
}else{
$('#birthd').css('color', 'green');
$('#birthd').css('border', '1px solid green');
var birthm_ok='1';
submit_check();
}
}
});
});
$(document).ready(function() {
$('#birthy').change(function(){
if($('#birthy').val() == '0'){
$('#birthy').css('color', 'red');
$('#birthy').css('border', '1px solid red');
}else{
$('#birthy').css('color', 'green');
$('#birthy').css('border', '1px solid green');
var birthy_ok='1';
submit_check();
if($('#birthd').val() == '0'){
$('#birthd').css('color', 'red');
$('#birthd').css('border', '1px solid red');
}else{
$('#birthd').css('color', 'green');
$('#birthd').css('border', '1px solid green');
var birthm_ok='1';
submit_check();
}
}
});
});
$(document).ready(function() {
$('#gender').blur(function(){
if($('#gender').val() == '-'){
$('#gender').css('color', 'red');
$('#gender').css('border', '1px solid red');
}else{
$('#gender').css('color', 'green');
$('#gender').css('border', '1px solid green');
var gender_ok='1';
submit_check();
}
});
$('#gender').change(function(){
if($('#gender').val() == '-'){
$('#gender').css('color', 'red');
$('#gender').css('border', '1px solid red');
}else{
$('#gender').css('color', 'green');
$('#gender').css('border', '1px solid green');
var gender_ok='1';
submit_check();
}
});
});
$(document).ready(function() {
var min_chars_name = 4;
var characters_error_name = 'Please enter atleast 4 chars.';
var match_error_name = 'Your passwords do not match.';
$('#pass').keyup(function(){
if($('#pass').val().length < min_chars_name){
$('.pass_error').html(characters_error_name);
$('.pass_error').css('color', 'red');
$('#pass').css('color', 'red');
$('#pass').css('border', '1px solid red');
}else{
$('.pass_error').css('color', 'green');
$('#pass').css('color', 'green');
$('#pass').css('border', '1px solid green');
$('.lname_error').html('');
$('#pass').keyup(function(){
if($('#pass2').val() !== $('#pass').val()){
$('.pass_error').html(match_error_name);
$('.pass_error').css('color', 'red');
$('#pass2').css('color', 'red');
$('#pass2').css('border', '1px solid red');
}else{
$('.pass_error').css('color', 'green');
$('#pass2').css('color', 'green');
$('#pass2').css('border', '1px solid green');
$('.pass_error').html('');
var gender_ok='1';
submit_check();
}
});
$('#pass2').keyup(function(){
if($('#pass2').val() !== $('#pass').val()){
$('.pass_error').html(match_error_name);
$('.pass_error').css('color', 'red');
$('#pass2').css('color', 'red');
$('#pass2').css('border', '1px solid red');
}else{
$('.pass_error').css('color', 'green');
$('#pass2').css('color', 'green');
$('#pass2').css('border', '1px solid green');
$('.pass_error').html('');
var gender_ok='1';
submit_check();
}
});
}
});
});
function submit_check(){
if(user_ok=='1' & gender_ok=='1' & birthm_ok=='1' & birthd_ok=='1' & birthy_ok=='1' & fname_ok=='1' & lname_ok=='1'){
document.write("hello");
};
};
This is because those variables you use are inside local scope of those local functions. To fix this, put them outside of your document.ready function:
var user_ok = 0;
var gender_ok = 0;
var birthm_ok = 0;
var birthd_ok = 0;
var birthy_ok = 0;
var fname_ok = 0;
var lname_ok = 0;
/*Now do your $(document).ready things*/
Then inside of your functions, change them by just using user_ok=1;
.
Also, there is an error in your if statement for the submit_check function. You need to use && instead of &.
function submit_check(){
if(user_ok=='1' && gender_ok=='1' && birthm_ok=='1' && birthd_ok=='1' && birthy_ok=='1' && fname_ok=='1' && lname_ok=='1'){
document.write("hello");
};
};
Hope this works for you.
精彩评论