class question

**richard_h** · Jul 3, 2002, 12:47

I'm writing a javascript class for form validation and have a problem moving focus to form elements through the object.

The focus will move to the form element for a split second before going.

This won't work when called within the class:
document.forms[0].elements[2].focus();

Does anyone know the answer or the reason it does this?

Many thanks in Advance.

**jofa** · Jul 3, 2002, 13:18

Can't see anything that's wrong with
document.forms[0].elements[2].focus();

But this is confusing:

The focus will move to the form element for a split second before going

Can you explain what you want to happen?
The focus will move to the element, but at the same time the form will be posted?

**MarcusJT** · Jul 3, 2002, 16:23

Presumably you're doing your validation via the onSubmit event - you need to return false to the event, otherwise the form submission will continue.

Something like this:

Code:

<SCRIPT>
function ValidateForm()
{
  if (this==that)
  {
    return true;
  }
  else
  {
    document.forms.myfield.focus();
    return false;
  }
}
</SCRIPT>
<BODY onSubmit="return ValidateForm();">
...
...
...
...

**jofa** · Jul 3, 2002, 17:10

...for a split second...

Still confused

M@rcos "return false"-solution will stop the submission

Is this what you are looking for?
document.forms[0].elements[2].focus();
setTimeout('document.forms[0].submit()', 1000);
return false;

**MarcusJT** · Jul 3, 2002, 17:32

richard_h, what exactly are you trying to do? We don't really have enough information to work with!!!

**richard_h** · Jul 4, 2002, 00:13

Hopefully this will make things clearer, if you cut and paste this code below you'll see what I mean.

PHP Code:


<script language="JavaScript">

    function formValidation()

    {

    /*methods*/

    this.emailCheck = emailCheck;

    

    /*messages*/

    this.error         = 'sorry your email address is invalid';

    }

    

    function emailCheck()

    {    

        if(document.forms[0].elements[0].value == '')

        {

        alert(this.error);

        document.forms[0].elements[0].focus();

        

        return false;

        }

        else

        {

        return true;

        }

    }

    

    function instance()

    {

    v = new formValidation();

    v.emailCheck()

    }

    </script>

        

</head>

<body>

<form onsubmit="return instance()">

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

<input type="Submit" value="submit">

</form>

</body>

</html>

I'm writing a validation class, which I can re-use on other projects, but there seems to be an issue when creating your own JavaScript objects, and then trying to manipulate form fields.

**Flawless_koder** · Jul 4, 2002, 03:37

maybe you're not getting a reference handle on it.
Try alerting the object before trying a method on it.

Flawless

**richard_h** · Jul 4, 2002, 04:07

I'm not sure if I know what you mean, creating javascript objects is all a bit new to me.

**Flawless_koder** · Jul 4, 2002, 06:00

Lol - You're RIGHT next door to me - just noticed!

Right:

Code:

function emailCheck()
    {    
        if(document.forms[0].elements[0].value == '')
        {
        alert(this.error);
/*             NOTE              */
        alert(document.forms[0].elements[0]);
        document.forms[0].elements[0].focus();
        
        return false;
        }
        else
        {
        return true;
        }
    }

That will tell you if you have an object or not.
if you DO have an object - alert the tagName - then the outerHTML - that way you'll see if you're where you think you are - and if you can actually focus that element.

Flawless

**jofa** · Jul 4, 2002, 07:19

Isn't this much better?

function instance()
{
v = new formValidation();
return v.emailCheck();
}

**Flawless_koder** · Jul 4, 2002, 07:23

yes - but still doesn't help the problem at hand - for which we need the author's reply.

Flawless

**jofa** · Jul 4, 2002, 07:27

BTW, I think sending the form to validate as a parameter to the constructor is more OO

1.
<form onsubmit="return validateForm(this)">

2.
function validateForm(frm)
{
var v = new formValidator(frm);
return v.emailCheck();
}

3.
function formValidator(frm)
{
this.frm = frm;
this.emailCheck = emailCheck;
}

4.
function emailCheck()
{
if(this.frm.elements[0].value == '')
{
etc etc...
}
}

**jofa** · Jul 4, 2002, 07:30

Originally posted by Flawless_koder
yes - but still doesn't help the problem at hand - for which we need the author's reply.

Flawless

It does help the problem at hand
Try it!

**richard_h** · Jul 4, 2002, 07:31

Yeah, I live in Croydon but work in East Grinstead (stones through).

Eveything points to the fact I can place the focus on the form element.

Jofa's method works, but it still bugs me why I can't do it the original way?

**Flawless_koder** · Jul 4, 2002, 07:33

* throw :P

And yeah - it bugs me to.

can you alert the object's type - so you can check it can be focused!?

Flawless

**Flawless_koder** · Jul 4, 2002, 07:34

Jofa - working out of my head here - so can't try it.

I'll believe you

Not sure why returning it would alter it's ability to focus - unless it's causing a bubble to get nulled by not having a handle open to the object to focus it ...

Shame you can't strace on windows

Flawless

**jofa** · Jul 4, 2002, 07:41

Jofa's method works, but it still bugs me why I can't do it the original way?

All I had to do to make it work was adding the "return" in the function instance()

The second alternative, sending the form ref as a parameter, is just better coding

**Flawless_koder** · Jul 4, 2002, 07:43

I think you missed my post

catch up

he he

Flawless

**jofa** · Jul 4, 2002, 07:52

Not sure why returning it would alter it's ability to focus

<form onsubmit="return instance()"> !!!

If the instance function does not return false, the submission is not stopped, and in this case (no action or method specified) the form is sent to the same page, when this page is loaded, the email text field loses focus
The default method is GET - look in your browser's address field and you will see "?email=" appended to the address

**Flawless_koder** · Jul 4, 2002, 07:57

I see your point - i didn't read through the code completely and assumed it was an onsubmt="return false;whatever();" and letting whatever submit if it wants to.

I normally do that in case i want to change attributes which will then want to be re-checked - if you get what i mean.

Flawless

**Bill Posters** · Jul 4, 2002, 09:30

Originally posted by Flawless_koder
* throw :P

And yeah - it bugs me to.

* too :P :P

Sorry Flawless, couldn't resist

**richard_h** · Jul 4, 2002, 12:22

Thank you for your posts I can now see that with the missing 'return', the instance() function will always return true.
Which explains everything!

**Flawless_koder** · Jul 4, 2002, 15:16

i just CAN'T believe i gave that one away @ Bill.

I REALLY should have seen that

Oh well - you win some you loose some!

Flawless

**MarcusJT** · Jul 4, 2002, 15:58

Originally posted by Flawless_koder
Oh well - you win some you loose some!

And just to add insult to injury, that should actually be

Oh well - you win some you lose some!

**Flawless_koder** · Jul 5, 2002, 00:21

Oh god!
How embarassing!

I'm normally quite proficient - but right now....
ummm .. let's just pretend i don't exist!

THANKS Marco - i know you've been waiting for that for a while

he he

Flawless

The SitePoint Forums have moved.

User Tag List

Thread: class question

Thread Tools

Display

class question

Bookmarks

Bookmarks

Posting Permissions