setting focus on the first field with error among multiple fields with errors

[eluser]cobolCowboy[/eluser]
Hello,
As things stand right now in this form, I figured out how to set the focus on the email input box when the form loads using the js at the bottom.
Actually the first line of js I've coded.
However, if the user inputs a valid email inthe text box and fails to enter a password, it makes no sense to focus on the email text box.
Now, I realize that Javascript may play a role here, but I have no idea how.

Code:

<?php // Login Form ?>
<h1>Login</h1>
<h4>First time here? <a href="&lt;?php echo base_url();?&gt;user/signup"> Sign Up!</a></h4>

<div id="login">
        <fieldset class="yui3-g">
        <div class="yui3-u-1-2">
            <br />    
            &lt;?php
                $attributes = array('class' => 'email', 'id' => 'myform');
                echo form_open('user/login', $attributes);
            ?&gt;        
                <label for="email">Email address</label><br />
                &lt;input type="text" name="email" id="email" value="&lt;?php echo set_value('email'); ?&gt;" size="80" maxlength="80" /&gt;&lt;br />
                &lt;?php echo form_error('email', '<span class="err2" id="errEmail">', '</span>'); ?&gt;
                <br />
                <label for="password">Password</label><br />
                &lt;input type="password" name="password" id="password" value="&lt;?php echo set_value('password'); ?&gt;" size="60" maxlength="60" /&gt;&lt;br />
                &lt;?php echo form_error('password', '<span class="err2" id="errPassword">', '</span><br/>'); ?&gt;
                <a href="&lt;?php echo base_url();?&gt;user/forgotPassword"><span style="font-size:small;">Forgot your password?</span></a>
                <br />
                            
                &lt;input type="image" alt="submit" src="&lt;?php echo base_url();?&gt;app/images/buttons/login.png" value="Login" class="right submitbutton" /&gt;                                                
                &lt;?php echo form_close()?&gt;
            </div>
            <div class="yui3-u-1-2">
                <img class="right" src="&lt;?php echo base_url();?&gt;app/images/login.jpg" alt="login image">
            </div>
        </fieldset>
</div>
[removed]
    document.forms['myform'].elements['email'].focus();
[removed]

Any one know how to do that?
I've added "id=" to the form_error function thinking I would use the id to somehow determine if the error line was generated and focus on the first one I find.
If I don't find anything, as in the first time through, I would default it to the first text box.
I'm not a programming newbie, but to javascript, well still very green.

[eluser]Cristian Gilè[/eluser]
There are several ways to do this.

You could use jquery:

Code:

$(document).ready(function() {
  &lt;?php if(form_error('email', '<span class="err2" id="errEmail">', '</span>') != ''): ?&gt;
     $('#email').focus();
  &lt;?php endif; ?&gt;
});

or using js:

Code:

<5cript type="text/javascript">
&lt;?php if(form_error('email', '<span class="err2" id="errEmail">', '</span>') != ''): ?&gt;
document.getElementById('email').focus();
&lt;?php endif; ?&gt;
</5cript>

Cristian Gilè

[eluser]cobolCowboy[/eluser]
Cristian,

I'll play with it when I get home from my day job.
Clearly the jquery is a more elegant approach, and I'm all for elegant.


merci, grazzi, bitte, thank you.

I'm more than happy to hear any other ideas.

[eluser]cobolCowboy[/eluser]
Okay!
After some experimentation, the following code provided the desired effect.

Working my way down the form setting $focus to the input field name depending on whether the form_error() function returns anything.
If none, then default to the first textbox on the form.

Code:

<?php
        if (form_error('name') != '')
       {$focus = 'name';}
         elseif (form_error('email') != '')
            {$focus = 'email';}
              elseif (form_error('password') != '')
                 ($focus = 'password';}
                   elseif (form_error('passconf') != '')
                      {$focus = 'passconf';}                      
                    elseif (form_error('newsletter') != '')
                        {$focus = 'newsletter';}
                          else
                            {$focus = 'name';}
    ?>

Finally, set the focus.
Bearing in mind that PHP is interpreted before the javascript is executed, I used an php echo statement within the javascript statement to indicate the name of the field to focus.

Code:

<5cript type="text/javascript">
    document.forms['myform'].elements['&lt;?php echo $focus ?&gt;'].focus();
</5cript>

How's that for a newbie!