Jump to content

Validation Misery

herghost

By herghost
in Javascript Help

 Share

Recommended Posts

herghost Advanced Member

herghost

Posted
Posted

Hi All,

 

Wondering if you can help. I have a form (see below) that is simply meant to validate the input by connection to a mysql database and checking if user name is available or not.

 

The page is reached on my site (local server) by clicking on the page in the header which uses ajax to display the page in <div> tags on the display page. This works fine, however the page wont use the validation script. Nothing appears at all when a username is entered. If I load the form as an individual page (by typing into browser) then it works as it should. Any ideas?

Form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" dir="ltr">
<head>
	<title>InsanityVille - Demos</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/main.css" />

        
    </head>
<div id="container2">
<div id="content">


<table>
<tr>
	<td width="68%">
		<h2>Please fill out the below form to register for your account.<br>
    </h2>
<h2> </h2>
		<div class="formContainer1">
			<div class="form1">
			   User Name : <input name="username" type="text" id="username" maxlength="15" class="textInput1" />
			   <span id="msgbox" style="display:none"></span>
			</div>
			<div class="form1">
			   Password : <input name="password" type="password" id="password" maxlength="30" class="textInput1" />
			</div>
			<div class="form1">
			   Confirm Password : <input name="cpassword" type="password" id="cpassword" maxlength="30" class="textInput1" />
			   <span id="pmsgbox" style="display:none"></span>
			</div>
			<div class="form1">
			   Email : <input name="email" type="email" id="email" class="textInput1" />
			   <span id="emsgbox" style="display:none"></span>
			</div>
			<div align="center">
			   <input type="button" id="checkUser" value="Submit" />   
			</div>
		</div>
	</td>
	<td>

	</td>
</tr>
</table>

</div>

 

All js scripts are loaded from the header:

 

Validate code:

<?php


include('../include/dbconnect.php');

// A little function for email validation with regexp
function checkEmail($email) {
// First, we check that there's one @ symbol, and that the lengths are right
if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
	// Email invalid because wrong number of characters in one section, or wrong number of @ symbols.
	return false;
}
// Split it into sections to make life easier
$email_array = explode("@", $email);
$local_array = explode(".", $email_array[0]);
for ($i = 0; $i < sizeof($local_array); $i++) {
	if (!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$", $local_array[$i])) {
		return false;
	}
}
if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) { // Check if domain is IP. If not, it should be valid domain name
	$domain_array = explode(".", $email_array[1]);
	if (sizeof($domain_array) < 2) {
		return false; // Not enough parts to domain
	}
	for ($i = 0; $i < sizeof($domain_array); $i++) {
		if (!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$", $domain_array[$i])) {
			return false;
		}
	}
}
return true;
}

// First section - user verification
// Get the check parameter
$check = $_REQUEST['check'];
if($check == 'username') { // If we must check for 'username' duplicates
// Let's get the parameter sent by AJAX
$username = trim($_REQUEST['user']); // also a little cleaning of the sent text
// Next, we'll query the database for the username
$query = mysql_query("SELECT `username` FROM `zonkpc` WHERE `username`='$username'") or die("Unable to perform the query: ".mysql_error());
// Now, let's test the result
if(mysql_num_rows($query) == 0) { // if it doesn't returns a result
	echo "yes";
}
else { // if it does exist
	echo "no";
}
// Closing the database connection
mysql_close();
}
if($check == 'email') { // If we must check for 'email' duplicates
// Let's get the parameter sent by AJAX
$email = trim($_REQUEST['emailAddress']); // also a little cleaning of the sent text
// Next, we'll query the database for the email
$query = mysql_query("SELECT `email` FROM `users` WHERE `email`='$email'") or die("Unable to perform the query: ".mysql_error());
// Now, let's test the result
if(mysql_num_rows($query) == 0) { // if there's no duplicate mail
	if (checkEmail($email) == false) {
  			echo "invalid";
		}
		else {
			echo "yes";
		}
}
else { // if it does exist
	echo "no";
}
// Closing the database connection
mysql_close();
}

?>

 

css:

/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
body{
line-height: 14px;
font-size: 12px;
background: #fff;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
margin: 0pt;
cursor: default;
}
table{
border-collapse: separate;
border-spacing: 0pt;
}
caption, th, td{
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
content: "";
}
blockquote, q{
quotes: "" "";
}
input, textarea, select{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
strong{
font-weight: 700;
}
ul{
list-style: outside;
}
a{
cursor: pointer;
color: #296ba5;
text-decoration: none;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
/******* /GENERAL RESET *******/
/******* REUSE *******/
h1, h2, h3, h4, h5, h6{
font-weight: 700;
color: #6ea6fb;
line-height: 1.8em;
}
h2{
font-size: 22px;
}
/******* /REUSE *******/
/******* CONTAINER *******/
#container{
width: 960px;
margin: 0pt auto;
color: #fff;
}
/******* /CONTAINER *******/
/******* TOP *******/
#top{
margin: 0 auto;
padding: 20px 0 0 0;
}
#top h1 a{
background: transparent url(../images/logo.jpg) no-repeat scroll left top;
display: block;
float: left;
height: 66px;
text-indent: -999999px;
width: 205px;
}
/******* /TOP *******/
/******* MENU *******/
#top #menu{
float: left;
list-style-type: none;
margin: 12px 0 0 26px;
}
#top #menu li{
float: left;
margin-right: 16px;
text-transform: uppercase;
color: #c2c2c2;
}
#top #menu li:hover{
color: #6fa5fd;
cursor: pointer;
}
/******* /MENU *******/
/******* LOADING *******/
#loading{
text-align: center;
visibility: hidden;
}
/******* /LOADING *******/
/******* CONTENT *******/
#content{
color: #7e7e7e;
margin: 0 0 20px 0;
line-height: 1.3em;
font-size: 14px;
}
#content p{
margin-bottom: 0.7em;
}
#content a{
font-weight: 700;
color: #6fa5fd;
border-bottom: 1px dotted #6fa5fd;
}
/******* /CONTENT *******/
/******* FOOTER *******/
#footer{
background: #efefef;
border: 1px solid #d0ccc9;
padding: 10px;
color: #7e7e7e;
font-size: 11px;
text-align: right;
}
/******* /FOOTER *******/
/******* Tables *******/
table#sample {
    background-color:#FFFFFF;
    border: solid #000 3px;
    width: 60%;



}

table#sample td {
    padding: 5px;
    border: solid #000 px;

}

.data {
    color: #000000;
    text-align: right;
    background-color: #FFFCCC;

}

.toprow {
    font-style: italic;
    text-align: center;
    background-color: #FFFFCC;

}

.leftcol {
    font-weight: bold;
    text-align: left;
    width: 150px;
    background-color: #FFFCCC;

}

.explanations {
font-style:italic;
color: #000000;
text-align:center;
background-color: #FFFCCC;

}

/******** /tables ***********/

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(../images/formbg.gif) repeat-x left top;

}
body1 {
margin: 0;
padding: 0;

color: #3C475B;
font-family: "segoe ui", tahoma, sans-serif;
font-size: small;
}

a:link1    { color: #0a4e96; }
a:visited1 { color: #0a4e96; }
a:hover1   { color: #333; }
a:active1  { color: #000; }

#content1 {
margin: 0;
padding: 1em 2em 1em 2em;
}

#header1 h1 {
margin: 0;
padding: 25px 0 0 0;
}

#header1 p {
font-weight: bold;
margin: 0;
padding: 0 0 80px 0;
}

#footer1 {
border-top: 1px dashed #ccc;
font-size: 11px;
color: #999;
align:center;
}
.formContainer1 {
width: 50%;
align: left;
padding-right: 350px;
}
.form1 {
text-align: right;
padding-top:10px;
font-size: 15px;
}
span1 {
text-align: left;
padding-top:3px;
font-size: 15px;
}
.textInput1 {
border: 1px dotted #ccc;	
font: bold 16px Verdana;
}
.messagebox1{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok1{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror1{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

 

running code:

$(document).ready(function() {
var checkUser = function (username) {
	//remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox1').text('Checking...').fadeIn("slow");
	var username = $('#username').val();
	$.post(
		"validateForm.php",
		{check: 'username', user: username},
		function(data) {
			if(data=='no') { //if username not avaiable
			  	$("#msgbox").fadeTo(200,0.1,function() { //start fading the messagebox
					//add message and change the class of the box and start fading
		  			$(this).html('User unavailable for registration!').addClass('messageboxerror1').fadeTo(900,1);
				});		
          		}
	  		else {
	  			$("#msgbox").fadeTo(200,0.1,function() {  //start fading the messagebox
		  			//add message and change the class of the box and start fading
		 		 	$(this).html('User available for registration!').addClass('messageboxok1').fadeTo(900,1);	
				});
	  		}
		}			
	)
}
var checkPass = function (password) {
	$("#pmsgbox").removeClass().addClass('messagebox1').text('Checking...').fadeIn("slow");
	var password = $('#password').val();
	var cpassword = $('#cpassword').val();
	if(password != cpassword) {
		$("#pmsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
			//add message and change the class of the box and start fading
			$(this).html('Passwords do no match!').addClass('messageboxerror1').fadeTo(900,1);
		});
	}
	else {
		$("#pmsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
			//add message and change the class of the box and start fading
			$(this).html('Passwords match!').addClass('messageboxok1').fadeTo(900,1);
		});	
	}		
}
var checkEmail = function (email) {
	$("#emsgbox").removeClass().addClass('messagebox1').text('Checking...').fadeIn("slow");
	var email = $("#email").val();
	$.post(
		"validateForm.php",
		{check: 'email', emailAddress: email},
		function(data) {
			if(data=='no') { //if username not avaiable
			  	$("#emsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
					//add message and change the class of the box and start fading
		  			$(this).html('Email address unavailable for registration!').addClass('messageboxerror1').fadeTo(900,1);
				});		
          		}
	  		else if(data=='invalid') { //if username not avaiable
			  	$("#emsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
					//add message and change the class of the box and start fading
		  			$(this).html('Email address provided is invalid!').addClass('messageboxerror1').fadeTo(900,1);
				});		
          		}
	  		else {
	  			$("#emsgbox").fadeTo(200,0.1,function() {  //start fading the messagebox
		  			//add message and change the class of the box and start fading
		 		 	$(this).html('Email address available for registration!').addClass('messageboxok1').fadeTo(900,1);	
				});
	  		}
		}			
	)


}
$("#username").blur(checkUser);
$("#cpassword").blur(checkPass);
$("#email").blur(checkEmail);
});

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.