Form validation complications

Hi All,

Currently learning javascript and I'm probably being a tad ambitious in my current task but I find this is usually the best way to learn. :)

However, I'm a tad stumped. I'm trying to a create script that does form validation. I've borrowed some code from URL=http://www.xs4all.nl/~sbpoley/webmatters/formval.html]this site[/URL] because it gives the desired effect that I'm after. That is once the user types in the text it validates and displays a little caption underneath the title.

I'll paste some of my adapted code.

from code formValid.js

function validateNum (vfld, // element to be validated
ifld, // id of element to receive info/error msg
reqd) // true if required
{
var stat = commonCheck (vfld, ifld, reqd);
if (stat != proceed) return stat;

var tfld = trim(vfld.value);
var ageRE = /^[0-9]{1,3}$/
if (!ageRE.test(tfld)) {
document.getElementById( \' + ifld + \' + ).style.visibility = "visible";)
msg (ifld, "error", "not a valid number");
setfocus(vfld);
return false;
}
return true;
};


in the asp file:
in the head..

<SCRIPT TYPE="text/javascript" src="formValid.js" ></SCRIPT>
<style>
.required {
color: 'red';
font-size: 10px;
display: none;
}
.errHeader {
padding-left: 5px;
padding-bottom: 5px;
font-size: 12px;
}
</style>

in the body...

<SCRIPT TYPE="text/javascript">
function checkform() {
var elem;
var errs=0;

if (!validateNum (document.forms.formerGrad.numReports, 'repNumErr', false)) errs += 1;

//alerts? replace with html instead
if (errs>1) alert('There are fields which need correction before submitting');
if (errs==1) alert('There is a field which needs correction before submitting');

return (errs==0);
};
</SCRIPT>

and finally in the table..

<form action="../scripts/formerGradSubmit.asp" name="formerGrad" method="post" onsubmit="return checkform();">

<tr><td>Number of reports (if applicable)
<div id="repNumErr" class="required">This is Not a Valid Number</div></td>
<td><input type="text" size="5" name="numReports" onchange="validateAge(this, 'repNumErr', false);"/></td>


Any idea why it isn't validating the input fields correctly? I think its to do with the visibility settings but I'm not entirely sure how I should be changing them.
If you need anymore details or info I'd be happy to oblige.

Thanks in advance :thumbsup: ,
Richard

You only posted partial code, so now I have to ask a couple dumb questions. :D

if (stat != proceed)
Where is proceed defined? Or was that meant to be a string? You didn't post the function commonCheck, so I am not sure what it returns.

document.getElementById( \' + ifld + \' + ).style
You don't need to do that if ifld is a string that contains an id.
document.getElementById(ifld).style
should work fine.

msg (ifld, "error", "not a valid number");
Is msg defined?

setfocus(vfld);
Is setfocus defined?

return (errs==0);
};
You don't need a semi-colon after a function definition.
Not sure if that is a technical error or not.
Javascript stops executing when an error occurs, so the first thing to do when something isn't working is to make sure it is error free.
Run your script in Firefox and open up the javascript console to see if any errors are dispalyed.

Hi nikkiH,

Thanks for your help so far. I've attached the code file I've been working on and I've added the bits of code you requested to this post.

Here's the common check function

var proceed = 2;

function commonCheck (vfld, // element to be validated
ifld, // id of element to receive info/error msg
reqd) // true if required
{
if (!document.getElementById)
return true; // not available on this browser - leave validation to the server
var elem = document.getElementById(ifld);
if (!elem.firstChild)
return true; // not available on this browser
if (elem.firstChild.nodeType != node_text)
return true; // ifld is wrong type of node

if (emptyString.test(vfld.value)) {
if (reqd) {
msg (ifld, "error", "required");
setfocus(vfld);
return false;
}
else {
msg (ifld, "warn", ""); // OK
return true;
}
}
return proceed;
};


The addition semi collons after my functions is a habit from AS2.0 in flash. Not sure if it should make a difference because they're both ECMA spec languages aren't they? (Am I right in thinking that, lol)

Made your suggested change to the validateNum function. Thanks for that!

Set focus is defined here:

function setfocus(vfld)
{
glb_vfld = vfld;
setTimeout( 'setFocusDelayed()', 100 );
}


It's to help fix an IE bug.

Once again, many thanks for your help. :thumbsup:

Richard

It's a really, really bad idea to call a global
var proceed = 2;

then do

function commonCheck
...
return proceed;

in a function that never used it to begin with. And that function returns false earlier!
Keep the return type either a number, or a boolean. Not both.
And don't return a global. Makes no sense.

If you had a local of the same name as the global, that's just not a good idea either. Confuzzle yourself and anyone else reading your stuff later.

Now, if what you meant to do was some sort of constant, JS doesn't have static values that cannot be changed. Be very, very careful doing this. Use all CAPS for names so people coming after you get an idea that they shouldn't assign that variable a new value. And comment in the def. that it is mean to be a constant.

var RET_ERROR = 0; // constant -- do not modify
var RET_NO_PROCEED = 1; // constant -- do not modify
var RET_PROCEED = 2; // constant -- do not modify

then in the function you can do this instead of the return true/false/proceed thing
if (!elem.firstChild)
return RET_ERROR; // not available on this browser
...
return RET_PROCEED;

and it makes more sense to someone reading the code.
(well, to many people, anyway, especially C coders LOL)

That said, I missed something.
if (!validateNum (document.forms.formerGrad.numReports
should be
if (!validateNum (document.formerGrad.numReports

But basically, what ends up happening is that you're using boolean syntax on a function that ultimately may not return a boolean. (note: what actually happens may return a boolean, but it is not guaranteed)

if (!validateNum
...
validateNum:
var stat = commonCheck (vfld, ifld, reqd);
if (stat != proceed) return stat;
...
commonCheck :
return proceed;

So, nothing guarantees that commonCheck returns boolean, yet later its value is used in !validateNum.
Error or not, it's bad coding that is error prone. I'd fix it up whether or not is was the ultimate cause of the problem, then use
if (validateNum != RET_PROCEED) or some such.
Or just use ALL booleans and no ints.

Anyway, that was long-winded. LOL

Hi NikkiH,

Thanks for the help, I've implemented the changes suggested to the best of my ability but I'm still having problems :( . Running the script with the FF javascript console it claims that validateNum has not been declared, although just from looking at the scripts I'm pretty sure it has. I've attached the JavaScript file, since this is the only file I've made changes to.

Cheers,
Richard

That's the error you get when the function has a syntax error.
Like the closing parens with no open parens here.

document.getElementById(ifld).style.visibility = "visible";)

Which makes it undefined for some odd reason in FF. MSIE gave a better error message for once and told me the line number the error was on.

Edit:
Oh, there are other syntax errors in there, too.
Copy/paste error: same error in validateString function with the extra parens
Regex error: missing end '/'
var strRE = /^[A-Za-z]*/

I've corrected the error on line 139 and on 159. What are the other ones you spotted? I can't see them.
Cheers,
Richard

Just the two I mentioned, I think. The validateString had extra parens like the first one, and it also is missing the ending slash in the regexp.
var strRE = /^[A-Za-z]*

It's just that I'm still getting an error in IE saying "Object Expected" line 192 and I'm at a loss to explain this.

Thanks for the help thus far.