argh! js form validation - doing my head in!!!

**Sarah** · Oct 3, 2002, 08:54

okay I am NO good with Javascript so please do not laugh it my awful code..

What I am trying to achieve sounded so easy in principle but the more I read up on it the worse I got and have ended up not knowing whether I am coming or going

Okay I have a html form (simple search and advanced search screens) I need to check that of the field that are completed they must be at least 2 characters in length and must contain an alphanumeric value.

so what I have got is this:
code on my form

Code:

onSubmit="return checksearchdata(this)" name=f1

and then in JS code I have this (kind of)

Code:

function checksearchdata(obj) 
	{
	var formObj = f1code;
	var codeReg = new RegExp(/[a-z][0-9]/)
	
	if (!codeReg.test(formObj.value))
		{
		alert("Your data is not valid for the "+formObj.name);
		formObj.select();
		formObj.focus();
		return false;
		}

	var min = 2;
		if (!field.value || field.value.length < min) 
		{
		alert(msg);
		field.focus();
		field.select();
		return false;
		}

	return true;
	}

I am doubting the min length as I am looking at (obj) rather than field.length.. I already check previously that at least one field in filled in, so its only to check the filled in fields are 2 digits min etc etc

please help and please don't laugh

Thanking you

Sarah

**cmorbutts** · Oct 3, 2002, 09:30

The problem is you are not referencing your fields correctly. Try this.

Code:

function checkSearchData(obj) 
	{
	var formObj = obj;
	var codeReg = new RegExp(/[a-z][0-9]/)
	
	if (!codeReg.test(formObj.fl.value))
		{
		alert("Your data is not valid for the "+formObj.fl.value);
		formObj.fl.select();
		formObj.fl.focus();
		return false;
		}

    field = formObj.fl;
        
	var min = 2;
		if (!field.value || field.value.length < min) 
		{
		alert("Minimum length");
		field.focus();
		field.select();
		return false;
		}

	return true;
	}

**Sarah** · Oct 4, 2002, 01:10

hmmm that doesn't seem to do anything

I ahve this as my code now

Code:

<script language="javascript">
<!--
function checkSearchData(obj) 
	{
	var formObj = obj;
	var codeReg = new RegExp(/[a-z][0-9]/)
	
	if (!codeReg.test(formObj.fl.value))
		{
		alert("Your data is not valid for the "+formObj.fl.value);
		formObj.fl.select();
		formObj.fl.focus();
		return false;
		}

    field = formObj.fl;
        
	var min = 2;
		if (!field.value || field.value.length < min) 
		{
		alert("Minimum length");
		field.focus();
		field.select();
		return false;
		}

	return true;
	}
-->
</script>

</head>
<body>

<form method="get" action="test.html" onSubmit="return checkSearchData(this)" name=f1>
	<input type="text" name="code" /><br />
	<input type="submit" name="Submit" value="Submit" />
</form>

all it does is takes me to the next page even when I enter in a single letter or number.

??

Sarah

**beetle** · Oct 4, 2002, 07:46

!! WARNING !! The proceeding is a shameless self-promotion

fValidate baby....

**Sarah** · Oct 4, 2002, 07:52

ho hum you might want to check that link

actually I have browsed your site whilst looking for help anyway but will have another look as I couldn't quite get what you had to what I need!

**cmorbutts** · Oct 4, 2002, 09:15

Once again you are not referencing your form elements correctly!

Okay, let's do it like this. Here's the HTML code for your form.

Code:

<form method="get" action="test.html" onSubmit="return checkSearchData(this)">
	<input type="text" name="code" /><br />
	<input type="submit" name="Submit" value="Submit" />
</form>

I removed the 'name="fl"' attribute of the form element. Why? Because we don't need it here. When the user submits the form, the javascript checkSearchData(this) function is fired off. And since it supplies "this" which is a reference to the form itself, you don't need to name the form nor access it directly.

Now in your javascript code...

Code:

function checkSearchData(objForm) 
	{
	var codeReg = new RegExp(/[a-z][0-9]/)
	
	if (!codeReg.test(objForm.code.value))
		{
		alert("Your data is not valid for the "+objForm.code.value);
		objForm.code.select();
		objForm.code.focus();
		return false;
		}

	var min = 2;
		if (!objForm.code.value || objForm.code.value.length < min) 
		{
		alert("Minimum length");
		objForm.code.focus();
		objForm.code.select();
		return false;
		}

	return true;
	}

See how we are accessing the text field called "code" in javascript?

I have my doubts about your RegExp check so you might want to have a look into that too.

**beetle** · Oct 4, 2002, 10:04

Originally posted by Sarah
ho hum you might want to check that link

actually I have browsed your site whilst looking for help anyway but will have another look as I couldn't quite get what you had to what I need!

What's wrong with the link? Works ok for me? Anyhow, the full URL is www.peterbailey.net/fValidate/site.php

Anyhow, moving right along, if you do use fValidate, just link up the two JS files, and change your form to look like this:

Code:

<form method="get" action="test.html" onSubmit="return validateForm(this,0,1,0,0)" >
	<input type="text" name="code" alt="alnum|2|L|1|0|none"/><br />
	<input type="submit" name="Submit" value="Submit" />
</form>

Details on the alnum validator type here: http://www.peterbailey.net/fValidate...ge=types#alnum

**Sarah** · Oct 7, 2002, 01:51

cmorbutts - thank you for your patience I now understand what you mean - and yes it seems to be working better. I agree that my regexp is incorrect and that part I looking at now, I first wanted to get the structure correct.

Beetle when I tried your link after you posted it I got server not found three times, but can now get through. And thanks but I am trying to learn it myself i.e. how to do it rather than my usual copy and paste from someone else.

Sarah

**cmorbutts** · Oct 7, 2002, 10:54

No worries Sarah. Glad that it's working out. Let us know how you go in the end.

The SitePoint Forums have moved.

User Tag List

Thread: argh! js form validation - doing my head in!!!

Thread Tools

Display

argh! js form validation - doing my head in!!!

Bookmarks

Bookmarks

Posting Permissions