calling a function from a function

[drmaves]

I'm having a problem calling a function from within a function to validate a form field.

I'm using this to execute the validation:

<form action="associate-act.cfm" method="POST" name="associate" onSubmit = "return ValidateForm('associate')">

When I submit the form nothing happens; however, if I use the isEMailAddr(email_address) function independently and call it using
onchange="isEMailAddr(email_address)" in the <input> tag it works fine.

Can you tell me what's wrong with my code?

Here's the code:

<script language = "Javascript">

function ValidateForm(associate) {

if (isEMailAddr(associate.email_address)) {
return false;
}
}

function isEMailAddr(email_address) {
var str = email_address.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Please verify the email address format");
return false;
} else {
return true;
}
}

</script>

[Vladdy]

Incorrect (M$ inspired) object reference.
HTML:
<form action="associate-act.cfm" method="POST" name="associate" onSubmit = "return ValidateForm(this)">
- pass the reference to the form to your validation function.
JS:
function ValidateForm(form)
{ return isEMailAddr(form.elements['email_address']);
}

[Phil Karras]

<script language = "Javascript">

function ValidateForm(associate) {
alert("Yup, got into ValidateForm"); // debug

if (isEMailAddr(document.associate.email_address)) {
return false;
}
}

function isEMailAddr(email_address) {

alert("Yup, got into isEMailAddr"); // debug

var str = email_address.value;
alert("And our str is: ["+str+"]"); // debug

var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Please verify the email address format");
return false;
}
else {
return true;
}
}

</script>

I put in a few debugging lines, next remember that the correct
form for getting something from a FORM is: document.FormName.FieldName.value
if you leave off the "document." then your code may only work in IE.

I tried to "fix" this in your ValidateForm function but you'll
have to make sure I did it correctly since I doubt your form name
if associate if it isn't then you'll need to use eval() to
build up the name & evaluate it to the value wanted.

[Vladdy]

Originally posted by Phil Karras

<script language = "Javascript">

function ValidateForm(associate) {
alert("Yup, got into ValidateForm"); // debug

if (isEMailAddr(document.associate.email_address)) {
return false;
}
}

function isEMailAddr(email_address) {

alert("Yup, got into isEMailAddr"); // debug

var str = email_address.value;
alert("And our str is: ["+str+"]"); // debug

var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Please verify the email address format");
return false;
}
else {
return true;
}
}

</script>

I put in a few debugging lines, next remember that the correct
form for getting something from a FORM is: document.FormName.FieldName.value
if you leave off the "document." then your code may only work in IE.

I tried to "fix" this in your ValidateForm function but you'll
have to make sure I did it correctly since I doubt your form name
if associate if it isn't then you'll need to use eval() to
build up the name & evaluate it to the value wanted.
When you pass form reference to the validation function and access form elements properly (using form.elements array) you do not care where the form is within the document. The code above is as old as languange tag :D :rolleyes: ... and deserves the same fate.

[drmaves]

I made only one change as Phil recommended:

if (isEMailAddr(document.associate.email_address)) {
return false;
}

This worked and I am now getting the validation to occur; however, if the entry passes the validation my form does not continue on and save. It just sits there and does execute the "action=".

Any ideas?

[Phil Karras]

To Vladdy all I can say is that the proof of it still being
needed is in that it works with document. and without it, it does
not.

To drmaves: Did you ever return "true" ??

One of the ways I like to do this is:

function Something() {
var Rtn = true;
if(something) {
Rtn = false;
}

return Rtn;
}

You might modify your function to do something like this.

[Vladdy]

Originally posted by Phil Karras
To Vladdy all I can say is that the proof of it still being needed is in that it works woth document. and without it, it does not.
Proof of what?
That you started your coding wrong by passing the string with the form name to the validation function:
<form name="formName" onsubmit="return validate('formName')">
instead of passing the reference to the form object directly:
<form onsubmit="return validate(this)">
???

[Phil Karras]

To Vladdy: Please re-read all the postings, I didn't start the coding.

And, as to my suggestion being "right" have you tried using
FormName.FieldName.value in Mozilla or NS? I believe it still does
not work that way because it is not in compliance with the standard.

That's all I'm saying.

Your way of using (this) is the "correct" form for passing what he was trying
to pass, but the other way will work if the correct form is used.

The error in Mozilla is: "FormName is not defined," if you leave off "document."

In NS6: the error is also: "FormName is not defined"

[drmaves]

Sorry for my ignorance - this is all new to me...

I've corrected the onSubmit as Vladdy suggested.

<form action="associate-act.cfm method="POST" name="associate" onSubmit = "return ValidateForm('this')">

I still am not getting the form to save even if isEmailAddr returns true. I put in a debug alert to see if it is returning true and it is.

Do I need another return true in the ValidateForm function?

Here's my code as it stands now:

function ValidateForm(associate) {
if (isEMailAddr(document.associate.email_address)) {
return false;
}
}

function isEMailAddr(email_address) {

var str = email_address.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Please verify the email address format");
return false;
}
else {
return true;
}
}

[Vladdy]

If you want your code to work in both IE and Moz as well as future browsers, you need to get rid of the poor practice of using FormName.FormField.value references.

Correct way is document.forms['FormName'].elements['FormField'].value

When you pass the reference to the form being validated:
<form onsubmit="return validate(this)">
The validation function access the form elements as
function validate(someForm)
{ formElement = someForm.elements['elementName'];

}

Phil, I know you did not start the coding, but you continued suggesting incorrect methods after I provided the solution, which drmaves did not copy correctly.

[drmaves]

I've changed the code to the following:

if (isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
}

Is this correct?

[Vladdy]

Originally posted by drmaves
I've changed the code to the following:

if (isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
}

Is this correct?
Better, but look at my initial response.

[drmaves]

Okay, I tried to interpret your suggestion but am still not sure what you mean.

This works:

function ValidateForm(form) {
if (isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
}

If I try this it does not work:

function ValidateForm(form)
{ return isEMailAddr(form.elements['email_address']);
}

What am I doing wrong and what would you have me replace this with?

Also, do you have any ideas on why my form is not saving.
I still am not getting the form to save even if isEmailAddr returns true. I put in a debug alert to see if it is returning true and it is.

[Vladdy]

Link to the page would be helpful, but make sure it is
onsubmit="return ValidateForm(this)"
not
onSubmit="return ValidateForm('this')"
as in one of your later posts - you are passing a reference to the object - not a string!!!

[Phil Karras]

Phil, I know you did not start the coding, but you continued
suggesting incorrect methods after I provided the solution, which
drmaves did not copy correctly.

Actually I submitted mine before yours arrived. Imagine my
surprise when I saw yours before mine on the next refresh.

Second there is nothing wrong with passing a form value the way I
suggested. It is in complete JS standard compliance for getting
the form value, as far as I know.

However, there really is no need to pass it at all since it can
be acquired the same way in any function.

So, if it's wrong kindly tell us why so we can all learn. I'm
certainly not opposed to learning!

Now, as to "save" where do you want to save the data? JS
(standard version, NOT IE version) does not allow saving data to
disk if that's what you're thinking.

Your function was still not ever returning true, as far as I can
see, try this:

function ValidateForm(form) {
if (isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
return true;
}

[drmaves]

When I talked about saving I meant that the "action=" was not executing. Here's the code I ended up using. Don't know if it's right or wrong but it works!

<form action="associate-act.cfm" method="POST" name="associate" onSubmit = "return ValidateForm('associate')">

<script language = "Javascript">

function ValidateForm(associate) {
if (!SingleSelectRequired(associate,'type')) {
alert("Please select an item from the Type drop-down list box.");
return false;
}
if (!SingleSelectRequired(associate,'state_province')) {
alert("Please select an item from the State/Province drop-down list box.");
return false;
}
if (!SingleSelectRequired(associate,'title')) {
alert("Please select an item from the Title drop-down list box.");
return false;
}

if (!isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
}


function SingleSelectRequired(associate,type) {
var itemSelected =
eval("document." + associate + "."
+ type + ".selectedIndex");
if (itemSelected == 0) {
return false;
} else {
return true;
}
}

function SingleSelectRequired(associate,state_province) {
var itemSelected =
eval("document." + associate + "."
+ state_province + ".selectedIndex");
if (itemSelected == 0) {
return false;
} else {
return true;
}
}

function SingleSelectRequired(associate,title) {
var itemSelected =
eval("document." + associate + "."
+ title + ".selectedIndex");
if (itemSelected == 0) {
return false;
} else {
return true;
}
}

function isEMailAddr(email_address) {
var str = email_address.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (str == "") {
return true;
}
else if (!str.match(re)) {
alert("Please verify the email address format.");
return false;
}
else {
return true;
}
}

</script>

[Phil Karras]

Congratulations on getting it to work.

I still don't like the fact that your function ValidateForm(associate) doesn't have a return true; in it.

[drmaves]

Does the function ValidateForm(associate) need a return true when all it really does is call other functions which all have a return true?

[Phil Karras]

I'm not really sure how JS handles it, but most other languages I write in do.

Think of it this way, F1 calls F2, the return from F2 goes to F1. the return from F1 goes to its caller, but if there was no return statement in F1 then it simply falls through & the value passed is anyone's guess.

It can not hurt to put it in, it MAY hurt to leave it out. It may all depend on the browser's implimentation of the standard again.

So worse case it could always work, as is, for one browser & never work this way in another.

Also, following a standard programming practice almost never causes a problem.

You can always make a few simple examples & try them out in different browsers to see what happens. I'd be interested in the results.

Oh, one more thing to look for, the return result could also depend on what was run before, if there is no specific return statement issued.

[drmaves]

I just added the return true at the end of the functon as an else (see below) and it tested just fine. Is this what you had in mind?


function ValidateForm(associate) {
if (!SingleSelectRequired(associate,'type')) {
alert("Please select an item from the Type drop-down list box.");
return false;
}
if (!SingleSelectRequired(associate,'state_province')) {
alert("Please select an item from the State/Province drop-down list box.");
return false;
}
if (!SingleSelectRequired(associate,'title')) {
alert("Please select an item from the Title drop-down list box.");
return false;
}

if (!isEMailAddr(document.forms['associate'].elements['email_address'])) {
return false;
}
else {
return true;
}
}

[Phil Karras]

That should work but the else is not really needed because if none of the other returns gets used then a simple
return true; just before the close brace will be used.

Either way will work, but without the else is just a little less work.

Also, without the else there is NO way that you will inadvertently change the if-else in such a way that the return true will NOT be used when it should be used, some distant time in the future.

In a previous posting above I showed you how I would do it if it were my program. I like the one-way in and one-way out method of programming. Look for my suggestion about using var Rtn = true;.

But, the bottom line is that You are the programmer and you need to be able to understand what was done so that in the future you can change it if needed.

[drmaves]

Thanks for all your help Phil and Vladdy!