what's validate(e) in form validation

[mtran]

Hi,

I'm new to js, and learn from some tutorial about form validation, and wondering:
Why use "e" or something like that. What is it, and what is it for compared to just check_val in the following ex?
What other common ways of doing this same thing given that the form is much longer?
Thanks!

function check_val(e) {

  if (e.name.value==''){
    alert("Please enter your name.")
    e.name.focus()
    return false;}
      
  return true;}

Also why IE doesn't gray out the disabled field while FF grays it out, as in below. How to make it work in IE?

document.formName.fieldName.disabled = true;

[jscheuer1]

e is often the event that triggered the function in all browsers except for IE. However, in this case, it looks like it is the element itself. It is hard to be certain without seeing how the function is called. If it is the element, it would be called something like so:

<form action="#" onsubmit="check_val(this);">

To answer your other question, the field is still disabled in IE, just not grayed out. If a test input is disabled, it cannot be modified. The gray color is just the way FF does it cosmetically, other browsers are different but, nearly all, including IE, do disable the field.

You could add to your code:

document.formName.fieldName.style.backgroundColor='#cccccc';

to also get that grayed out look in IE and:

document.formName.fieldName.style.backgroundColor='#ffffff;

to return it to white when you set its disabled=false.

[Twey]

document.formName.fieldName.style.backgroundColor='#cccccc';

You should use

document.forms.formName.elements.fieldName.style.backgroundColor='#cccccc';

I don't believe that forms being available as properties of the document object, or elements being available as properties of a form, are defined in any standard.

Also, you should note that doing this might result in a rather odd look (or have no effect at all) if the user's colour settings don't match what you expect them to, or if an external toolkit is used to render the form element and so uses the system scheme. Altogether, better to leave well alone.

[mtran]

If it is the element, it would be called something like so:
<form action="#" onsubmit="check_val(this);">

Here is how the form is submitted. Guess it's the same with what you wrote.

<input type="submit" value="Send" onClick="return check_val(this.form);" />

So: function check_val(e) {
if (e.name.value==''){
is a short way of scripting. The long way should be sth like below, right?

function check_val() {
  if (document.formName.fieldName.value.==''){
    alert("Please enter your name.")
    document.formName.fieldName.focus()
    return false;}  
  return true;}

but why I didn't see any thing like: var e =.... in the first code. Why it still works without all of those document.forms.formName...

Thanks a lot for your help and... patience

[Twey]

It's not a "short" way. You should read a Javascript tutorial, particularly the sections on functions.

[jscheuer1]

First off, I think Twey is right on the technicality he mentions. It is the proper way but, most modern browsers will allow the shorter method.

Next, you are correct about the shorthand used in the scripting technique. The economy of code rests upon the 'this' token. When an element has an event and that event is configured for it in any way other than the attachEvent method (an IE proprietary method), then the 'this' keyword refers to the element itself. In both my example:

<form action="#" onsubmit="check_val(this);">

Which to be more like what you have could be written like so:

<form action="#" onsubmit="return check_val(this);">

(using it like that simply is a way of guaranteeing that the return value of the function is passed in the handler back to the event itself)

and in your example:

<input type="submit" value="Send" onClick="return check_val(this.form);" />

The this keyword is being used to pass the form itself to the function. In your case, since the event is triggered by a button in the form, it becomes 'this.form' - in mine, since it is triggered by the form tag itself, it is simply 'this'.

The other reason it works is that a function written in this format:

function functionName(parameter) {
alert(parameter);
}

gets the value of parameter from the way it was called, it doesn't need to be formally set:

functionName('Hello World');

will pop up an alert with Hello World on it.

One other 'trick' used in the validation function you have is that the field being tested is assumed to have the name of 'name':

e.name.value

then refers to the value of an element of the form in question that has the name of 'name':

<input type="text" name="name">

[mwinter]

I don't believe that forms being available as properties of the document object, or elements being available as properties of a form, are defined in any standard.

Not as such, no. As far as I can see, they are a throwback to JavaScript 1.1.

According to the Netscape reference, and demonstrating quite poor forethought, both the forms collection (as well as images, links, etc.) and direct references were added at the same time. How no-one considered the impact of conflicting property names is beyond me.

Oddly enough, form objects always had an elements collection (according to the same reference), yet by adding control references to the form object itself, overwriting methods and properties (such as submit and action) is quite easy and a frequent error.

Mike