JavaScript - Am I Missing Something?

<script type="text/javascript">
    $(document).ready(function() {
        $('div.message-error').hide();
        $('div.message-success').hide();
        $('ul#characterList').css( 'margin-left', '120px' );
        $('li').remove('.characterName');
        $("#handlerForm").validate({ 
            rules: {
             firstName: "required",
             lastName: "required",
             userName: {
                required: true,
                minlength: 2
             },
             password: {
                required: true,
                minlength: 5
             },
             password2: {
             required: true,
                minlength: 5,
                equalTo: "#password"
             },
             email: {
                required: true,
                email: true
             },
             messages: {
                 firstName: "Please enter your firstname",
                 lastName: "Please enter your lastname",
                 userName: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                 },
                 password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                 },
                 password2: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                 },
                 email: "Please enter a valid email address"
             }
        });
        $("input.submit").click(function() {
            var userID = $("input#userID").val();
            var defaultChar = $("select#charactersDrop option:selected").text();
            var userName = $("input#userName").val();
            var firstName = $("input#firstName").val();
            var lastName = $("input#lastName").val(); 
            var email = $("input#email").val(); 
            var statusID = $("select#statusID").val(); 
            var isAdmin = $("select#isAdmin").val(); 
             var liElements = $("ul#characterList li");
             var characterIDList = "";
             for( var i = 0; i < liElements.length; i++ ) {
                var liElement = $( liElements[ i ] );
                
                // only start appending commas in after the first characterID
                if( i > 0 ) {
        	       characterIDList += ","; 
                }
        
                // append the current li element's characterID to the list
                characterIDList += liElement.data( 'characterID' );
             }
             var dataString = 'userID=' + userID + 'userName=' + userName  + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&submitHandler=True';
             $.ajax({
                 type: "POST",
                 url: "processes/handler.php",
                 data: dataString,
                 success: function(myNewVar) {
                    if (myNewVar == 'good') {
                        $('div.message-error').hide();
                        $("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
                        $("div.message-success").show().delay(10000).hide("slow");
                        $(':input','#handlerForm')
                        .not(':submit, :button, :hidden')
                        .val('')
                        $('ul#characterList li').each(function() {
                            $(this).remove();
                        });
                    } else if (myNewVar == 'bad1') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " already exists in the database.</p>");
                        $("div.message-error").show();    
                    } else if (myNewVar == 'bad2') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } else if (myNewVar == 'bad3') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } else if (myNewVar == 'bad1bad2') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    }  
                }
            });
            return false;    
        });
    });
    </script>
    
    <!-- Form -->
    <form action="#" id="handlerForm">
    	<fieldset>
    		<legend>Add New Handler</legend>
            <div class="field required">
    			<label for="userName">User Name</label>
    			<input type="text" class="text" name="userName" id="userName" title="User Name"/>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="password">Password</label>
    			<input type="password" class="text" name="password" id="password" title="Password" />
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
            </div>
            <div class="field required">
    			<label for="password2">Confirm Password</label>
    			<input type="password" class="text" name="password2" id="password2" title="Confirm Password" />
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
            </div>
            <div class="field required">
    			<label for="firstName">First Name</label>
    			<input type="text" class="text" name="firstName" id="firstName" title="First Name"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="lastName">Last Name</label>
    			<input type="text" class="text" name="lastName" id="lastName" title="Last Name"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="email">Email</label>
    			<input type="text" class="text" name="email" id="email" title="Email"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="statusID">Status</label>
                <select class="dropdown" name="statusID" id="statusID" title="Status">
                <option value="0">- Select -</option>
                <?php
                $query = 'SELECT ID, statusName FROM statuses';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['statusName']."</option>\r";
                }
                ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="isAdmin">Administrator</label>
                <select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
                <option value="0">- Select -</option>
                <?php
                    $administrator = array('Yes', 'No');
                    foreach($administrator as $admin):
                ?>        
                <option value="<?php echo $admin; ?>"><?php echo $admin; ?></option>
             
             <?php endforeach; ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
    	</fieldset>
        <fieldset>
    		<legend>Handler's Characters</legend>
            <div class="field">
    			<label for="charactersDrop">Characters</label>
                <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="0">- Select -</option>
                <?php
                $query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                }
                ?>
                </select>
                <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
                <ul id="characterList"></ul>
            </div>
                <input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />      
                <input type="submit" class="submit" name="submitHandler" id="submitHandler" title="Submit Handler" value="Submit Handler" />
    	</fieldset>
    </form>
    <!-- /Form -->
    <!-- Messages -->
    <div class="message message-error">
        <h6>Required field missing</h6>
        <p>Please fill in all required fields. </p>
    </div>
    <div class="message message-success">
        <h6>Operation succesful</h6>
        <p>Handler was added to the database.</p>
    </div>
    <!-- /Messages -->
    
    <script type="text/javascript" language="javascript">
    // Long version
    function HandlerCharacters() {
        function isDupe(which) {
            var result = false;
            $('ul#characterList li').each(function(i, e) {
                if ($(e).data('characterID') == which) {
                    result = true;
                    return false; // break out of .each()
                }
            });
            return result;
        }
        var characterID = $('#charactersDrop option:selected').val();
        var characterName = $('#charactersDrop option:selected').text();
        if (characterID > 0 && !isDupe(characterID)) {
        	// Create the anchor element
        	var anchor = $( '<a href="#">Remove</a>' );  
        	
        	// Create a click handler for the anchor element
        	anchor.click( function() {
        		$( this ).parent().remove();
        		return false;  // makes the href in the anchor tag ignored
        	} );
        	
        	// Create the <li> element with its text, and then append the anchor inside it.
        	var li = $( '<li>' + characterName + '&nbsp;</li>' ).append( anchor );
        	li.data( 'characterID', characterID );
        	
        	// Append the new <li> element to the <ul> element
        	$( '#characterList' ).append( li );
        }
    }
    </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function printtext(){
	document.write("Hello");
}
</script>
</head>

<body>
<input type="button" value="click me" onclick="printtext()" />
</body>
</html>

<script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>

// Validate Registration Form

function validate(form) {
	fail  = validateUsername (form.uname.value)
	fail += validateUpass (form.upass.value)
	fail += validatePassword (form.password.value)
	fail += validateFname (form.fname.value)
	fail += validateLname (form.lname.value)
	fail += validateID	  (form.ID.value)
	fail += validateEmail (form.email.value)
	if (fail =="") return true
	else {alert(fail); return false }
}

function validateUsername (field) {
	if (value==null||value=="") return "Please enter username.\n"
	return ""
}

function validateUpass (field) {
	if (field =="") return "Please enter password.\n"
	return ""
}

function validatePassword (field) {
	if (value == "") return "Please confirm password. \n"
	return ""
}

function validateFname (field) {
	if (value =="") return "Please enter a first name.\n"
	return""
}

function validateLname (field) {
	if (value=="") return "Please enter a last name.\n"
	return""
}

function validateID (field) {
	if (value=="") return "Please enter your USAC license number.\n"
	return ""
}

function validateEmail (field) {
	if (value=="") return "Please enter your email address.\n"
	else if (!((field.indexof(".")>0) && 
			(field.indexOf("@") > 0)) ||
			 /[^a-zA-Z0-9.@_-]/.test(field))
	return "The Email address is invalid.\n"
	return""
}

<script src="includes/js/validate-registration-form.js"></script>
</head>

<body>
<div id="wrap">
<h1>CritTracker.com Registration page</h1>
<?php include('includes/nav.php');?>
<div id="content_wrap">
<div id="center_content">
<div id="register">
<form class="register" method="post" action="register.php" onSubmit="return validate(this)">
<fieldset>
<legend>Register to CritTracker</legend>
<ol>
<li>
<label for="uname">Username</label> <input type="text" name="uname" /><br />
</li>
<li>
<label for="upass">Password</label> <input type="password" name="upass" /><br />
</li>
<li>
<label for="upass">Confirm Password</label>  <input type="password" /><br />
</li>
<li>
<label for="fname">First Name</label>  <input type="text" name="fname" /><br />
</li>
<li>
<label for="lname">Last Name</label> <input type="text" name="lname" /><br />
</li>
<li>
<label for="ID">USA Cycling License</label> <input type="text" name="ID" />
<select name="cat">
  <option name="cat" value="5">Cat 5</option>
  <option name="cat" value="4">Cat 4</option>
  <option name="cat" value="3">Cat 3</option>
  <option name="cat" value="2">Cat 2</option>
  <option name="cat" value="1">Cat 1</option>
</select>
</li>
<li>
  <label for="email">Email</label> <input type="text" name="email" /><br />
  
  <input type="submit" value="Register to CritTracker.com" />
</li>
</ol>
</fieldset>
</form>
</div></div>

this.delete = function(obj)
{
..

<script>
(function($){
	
	var listview = $('#listview');
	
	var lists = (function(){
		var criteria = {
			drop-filter: {
				insert: function(value){
					if(value)
						return handleFilter("filter", value); 
				},
				msg: "Filtering..."
			},
			search-filter: {
				insert: function(value){
					if(value)
						return handleFilter("search", value);
				},
				msg: "Searching..."
			}
			
		}
		var handleFilter = function(key,value){
				return {key: value};
		}
		return {  
			 create: function(component){
				var component = component.href.substring(component.href.lastIndexOf('#') + 1); 
				return component;
			},
			 setDefaults: function(component){
				var parameter = {};
				switch(component){
					case "sites":
						parameter = {
							'order': 'site_num',
							'per_page': '20',
							'url': '/sites'
						}
				}
				return parameter;
			},
			getCriteria: function(criterion){
				return criteria[criterion];   
				
 			},
			addCriteria: function(criterion, method){
				criteria[criterion] = method;  
			}
		}
	})(); 
	
	var Form = function(form){
		var fields = [];
		$(form[0].elements).each(function(){  
			var field = $(this);
			if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field)); 
		})
	}
	
	Form.prototype = {
		initiate: function(){
			for(field in this.fields){
				this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO 
			}
		},
		 isCalculable: function(){    
			for(field in this.fields){ 
				if(!this.fields[field].alterData){ 
					return false; 
				}
			} 
			return true; 
		} 
	}
	
	var Field = function(field){ 
		this.field = field; 
		this.alterData = false;  
		this.attach("change"); 
		this.attach("keyup"); 
	}
	
	Field.prototype = { 
		attach: function(event){
			var obj = this;  
			if(event == "change"){
				obj.field.bind("change", function(){ 
					return obj.calculate();
				})
			}
			if(event == "keyup"){
				obj.field.bind("keyup", function(e){  
					return obj.calculate();
				})
			}
		},
		calculate: function(){
			var obj = this,  
				field = obj.field,  
				msgClass = "msgClass",
				msgList = $(document.createElement("ul")).addClass("msgClass"), 
				types = field.attr("alter-data").split(" "),
				container = field.parent(), 
				messages = [];
				
			field.next(".msgClass").remove();  
			for(var type in types){  
				var criterion = lists.getCriteria(types[type]);
				if(field.val()){ 
					var result = criterion.insert(field.val()); 
					
					container.addClass("waitingMsg"); 
					messages.push(criterion.msg);  
					
					obj.alterData = true; 
					
					initializeTable(result);  
					
				}
				else {  
					return false; 
					obj.alterData = false;  
				}
			}
			if(messages.length){
				for(msg in messages){
					msgList.append("<li>" + messages[msg] + "</li");  
				}
			}
			else{
				msgList.remove();  
			}
		}
	}
	
	$('#dashboard a').click(function(){
		var currentComponent = lists.create(this);
		var defaults = lists.setDefaults(currentComponent);
		initializeTable(defaults);
	});
	
	var initializeTable = function(custom){
		var defaults = {}
		var custom = custom || {};
		
		var query_string = $.extend(defaults, custom);
		
		var params = [];
		$.each(query_string, function(key,value){
			params += key + ': ' + value; 
		})
		
		$.ajax({
			type: 'GET',
			url: '/' + url,
			data: params,
	      	dataType: 'html',
			error: function(){},
			beforeSend: function(){},
			complete: function() {},
	      	success: function(response) { 
				listview.html(response);
			}
		})
	}
	
	$.extend($.fn, {  
		calculation: function(){
		var formReady = new Form($(this));  
			
		if(formReady.isCalculable) {
			formReady.initiate();   
		}
		
	})
	
	var form = $(listview + ' fieldset');
	form.calculation();
	
})(jQuery)
</script>

<head>
<script type="text/javascript">
 function replaceImg(path) {
 	var imgDest = document.getElementById('image');
	var imgSrc = path;
	imgDest.setAttribute("src", imgSrc);
	}
</script>

</head>
<body>

    <div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>

    <div class="gallerypics"><?php
		$counter = 0; 
     foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
    {
        $filename = basename($pathToThumb);
        echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
        $counter++;
    }
?>

</body>