onblur Validation on Popup.

[Samujedrez]

Hi, I'm making a validation form onblur, but I wanna do it on a popup box.

When I try the js code in a normal form it works perfectly, but when I try to implement it into a popup box form it doesn't work then.

I'd like to know if in a popup I must write any other codelines.

This is my HTML for a normal form:

PHP Code:

<form action="asda.php" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
        <div class="both">
            <br clear="all" />
            <div>
                <label>Country</label>
                <input id="User_Nick" name="User_Nick" type="text" value="" onblur="return check_username();" />
                <div id="Info"></div>
                <span id="Loading"><img src="loader.gif" alt="" /></span>
            </div>
        </div>  
        <br clear="all" />  
    </form> 


And this is my code from the popup box form:

PHP Code:

<div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>User Registration</h1>
        <p id="contactArea">
            <form action="asda.php" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
                <div class="both">
                    <br clear="all" />
                    <div>
                        <input id="User_Nick" name="User_Nick" type="text"  value="" placeholder="Nickname" maxlength="20" onblur="return check_username();">
                        <div id="Info"></div>
                        <span id="Loading"><img src="loader.gif" alt="" /></span>
                    </div>
                </div>
                <br clear="all" />
            </form>
        </p>
    </div> 


onblur only works in the first form. Any idea about why this happens?

Thank you in advance.

EDIT: I don't know if you need, cause it works but I will post here the code.js

//The document has the focus
$(document).ready(function() {
	$('#Loading').hide();    
});


// Check Username
function check_username(){

	var username = $("#User_Nick").val();
	$('#Loading').show();
	$.post("check_username_availablity.php", {
		username: $('#User_Nick').val(),
	}, function(response){
		$('#Info').fadeOut();
		 $('#Loading').hide();
		setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
	});
	return false;
}

//Finish Ajax Function
function finishAjax(id, response){
 
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn(1000);
}

And my PHP CODE

PHP Code:

<?php
    $link=mysql_connect('localhost','root',''); //Conexión a la base de datos.
    mysql_select_db("supahsonic", $link); //Selección de la base de datos.
    if($_REQUEST){
    $username     = $_REQUEST['username'];
    
    if(strlen($username)>2){
        $query = "select * from users where user_nick = '".strtolower($username)."'";
        $results = mysql_query( $query) or die('ok');
        
        if(mysql_num_rows(@$results) > 0) // not available
        {
            echo '<div id="Error">Already Taken</div>';
        }
        else
        {
            echo '<div id="Success">Available</div>';
        }
    }else{
        if(strlen($username)==0){
            echo '<div id="Error">The field cannot be blank</div>';
        }else{
            echo '<div id="Error">Nick name too short</div>';
        }
    }
}?>

[felgall]

Do you have the JavaScript attached to the popup as well as to the main page?

[DanInMa]

How about a different approach?

$(document).ready(function() {
	//$('#Loading').hide(); you can use plain ole css to hide this by default, but re add it if you prefer.

$("#User_Nick").blur(function(e){
$('#Loading').show();
$.post("check_username_availablity.php", {
		username: $(this').val(),
	}, function(response){
		$('#Info').fadeOut();
		 $('#Loading').hide();
		setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
	});
})



});

//Finish Ajax Function
function finishAjax(id, response){
 
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn(1000);
}

also you can remove onblur="return check_username();"

- also how are you showing the actual pop up?

[Samujedrez]

This is the js I am using for the popup.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

I tried your code but it doesn't work on a normal form. I don't know what's wrong, someone told me that maybe, I am focussing the onblur over the main website and not over the popup, but I'm not sure if he was right.

Mmmm, this is a headhache