[SNewman]

Hey

So I am developing a site for web games. I am working on a form controller which will be used on the forms throughout the site. The following is the code for that file:

core.frmController.js

var frmController = {
	Form:"",
	Fields:new Array(),
	Rules:new Array(),
	Errors:new Array(),
	
	options: {
		errBack:'#FF6666',
		errFore:'#FFFFFF',
		stdBack:'#FFFFFF',
		stdFore:'#777777',
		errContainer:'',
		stdContainer:'',
		btnContainer:'',
		frmName:''
	},
	
	getFields: function() {
		this.Fields = this.Form.getInputs('text');
		this.Fields = this.Fields.concat(this.Form.getInputs('password'));
	},
	
	addRule: function(fName, rType, rVal, err, relFields) {
		this.Rules.push("\""+fName+"\",\""+rType+"\",\""+rVal+"\",\""+err+"\",\""+relFields+"\"");
	},
	
	addRuleByVal: function(fName, rVal, err, relFields) {
		this.Rules.push("\""+fName+"\",\""+rVal+"\",\""+err+"\",\""+relFields+"\"");
	},
	
	markAddtl: function(relFields) {
		var tokens = relFields.split(",");
		for(x = 0; x < tokens.length; x++) {
			this.Form[tokens[x]].setStyle({
				backgroundColor:this.options.errBack,
				color:this.options.errFore
			});
		}
	},
	
	validate: function() {
		for(x=0;x<this.Fields.length;x++) {
			this.Fields[x].setStyle({
				backgroundColor:this.options.stdBack,
				color:this.options.stdFore
			});
		}
		
		var fName = "";
		var rType = "";
		var rVal = "";
		var err = "";
		var relFields = "";
		
		for(y=0; y<this.Rules.length; y++) {
			var tokens=this.Rules[y].split(",");
			fName = tokens[0].split("\"")[1];
			rType = tokens[1].split("\"")[1];
			rVal = tokens[2].split("\"")[1];
			err = tokens[3].split("\"")[1];
			relFields = tokens[4].split("\"")[1];
			
			if(rType == "NOT NULL") {
				if(this.Form[fName].getValue() == "") {
					this.Form[fName].setStyle({
						backgroundColor:this.options.errBack,
						color:this.options.errFore
					});
					this.markAddtl(relFields);
					this.Errors.push(err);
				}
			}
			else if(rType == "BETWEEN") {
				var minMax = rVal.split("-");
				var min = minMax[0];
				var max = minMax[1];
				if(this.Form[fName].getValue().length < min || this.Form[fName].getValue().length > max) {
					this.Form[fName].setStyle({
						backgroundColor:this.options.errBack,
						color:this.options.errFore
					});
					this.markAddtl(relFields);
					this.Errors.push(err);
				}
			}
			else if(rType == "AT LEAST") {
				if(this.Form[fName].getValue().length < rVal) {
					this.Form[fName].setStyle({
						backgroundColor:this.options.errBack,
						color:this.options.errFore
					});
					this.markAddtl(relFields);
					this.Errors.push(err);
				}
			}
			else if(rType == "NO GREATER") {
				if(this.Form[fName].getValue().length > rVal) {
					this.Form[fName].setStyle({
						backgroundColor:this.options.errBack,
						color:this.options.errFore
					});
					this.markAddtl(relFields);
					this.Errors.push(err);
				}
			}
			else if(rType == "EQUALS") {
				if(this.Form[fName].getValue() != rVal) {
					this.Form[fName].setStyle({
						backgroundColor:this.options.errBack,
						color:this.options.errFore
					});
					this.markAddtl(relFields);
					this.Errors.push(err);
				}
			}
		}
	},
	
	init: function() {
		if(this.options.errContainer == "") {
			alert("[ERROR] Error container not set.");
			return;
		}
		if(this.options.stdContainer == "") {
			alert("[ERROR] Content container not set.");
			return;
		}
		if(this.options.btnContainer == "") {
			alert("[ERROR] Submit container not set.");
			return;
		}
		if(this.options.frmName == "") {
			alert("[ERROR] Form name not set.");
			return;
		}
		this.Form = $(this.options.frmName);
		this.getFields();
		Event.observe(this.Form, 'submit', function(e) {
			e.stop();
			frmController.validate();
		});
	}
};

On my registration form, I have the following code to initialize and test the controller:

register.tpl

<script language="text/javascript">
		frmController.addRule("mk_reg_user", "NOT NULL", "", "Please enter your desired username.", "");
		frmController.addRule("mk_reg_pwd1", "EQUALS", mk_reg_pwd2, "Passwords must match.", "mk_reg_pwd2");
		frmController.options.errContainer = "errs";
		frmController.options.stdContainer = "cont";
		frmController.options.btnContainer = "sbmt";
		frmController.options.frmName = "frmRegister";
		frmController.init();	
</script>
<div id="cont">
	<div id="errs" align="left" style="display:none;"></div>
	<form id="frmRegister" action="#" method="post">
		<table border="0" width="450px" height="100%">
			<tr valign="middle">
				<td width="135px" align="left">Username:</td>
				<td width="100px" align="left"><input type="text" id="mk_reg_user" name="mk_reg_user"></td>
				<td width="215px" align="left"><small>(between 8 - 25 characters)</small></td>
			</tr>
			<tr valign="middle">
				<td width="135px" align="left">Password:</td>
				<td width="100px" align="left"><input type="password" id="mk_reg_pwd1" name="mk_reg_pwd1"></td>
				<td width="215px" align="left"><small>(between 8 - 25 characters)</small></td>
			</tr>
			<tr valign="middle">
				<td width="135px" align="left">Confirm Password:</td>
				<td width="100px" align="left"><input type="password" id="mk_reg_pwd2" name="mk_reg_pwd2"></td>
				<td width="215px" align="left">&nbsp;</td>
			</tr>
			<tr valign="middle">
				<td width="135px" align="left">E-mail Address:</td>
				<td width="100px" align="left"><input type="text" id="mk_reg_email" name="mk_reg_email"></td>
				<td width="215px" align="left"><small>(requierd to activate account)</small></td>
			</tr>
			<tr valign="middle">
				<td colspan="3" align="center" width="450px" id="sbmt"><br/><input type="submit" id="btnDoReg" name="btnDoReg" value="  Register  "><br/><br/></td>
			</tr>
		</table>
	</form>
</div>

I actually have two questions. The first is, I would ideally like to make the addRule and addRuleByVal functions have rVal and relFields as optional parameters, since not all rules require a value or related fields to mark. Whenever I try doing this, for example:

addRule: function(fName, rType, rVal="", err, relFields="") {

I get some javascript error and the entire controller doesn't work. The other thing that is odd is after I finished the script, I saved the source file and compressed the code with js packer. When the compressed script is called instead of the source script, the controller works and all three fields are accurately marked according to the rules defined in the registration template. When the source script is called, it appears that only the first rule is checked and subsequently marked. This is extremely odd, seeing as how I made no changes between the source and compressed script. This is my first experience with object-oriented javascript coding...in the past I've only done very basic functions. Can anyone offer some insight?

[EDIT]
Website w/ source script called: http://www.fueledbycaffine.com/kodo/?js=source
Website w/ packed script called: http://www.fueledbycaffine.com/kodo/?js=packed
Click Register at the top, under myKodo.

[IT-Support]

Have a look at this:
http://www.tipstrs.com/tip/354/Using...ript-functions

Hope it helps.

[SNewman]

Thanks! That helps with my first problem. Still trying to find out why my packed script works and source script doesn't though...

[MMJ]

Your links are broken.