Two textfield validation using JavaScript

Question

I am building a registration form. I have two fields where a user can enter his email (one for email, the second is re-enter email). I am trying to validate the two fields to confirm they match. What I have done is that when a user moves to the password field, the onfocus will call the validate function and check if the two fields match. If there is an error, the error will display in another textfield. The problem is that the code is not working!!

Here is the code:

<html>
  <head>
    <script>
      var fieldalias="Email address field"
      function verify(element1, element2){
        var passed=false
        if (element1.value==''){
          document.f1.emailerror.value='Fill out the first email field';
          element1.focus()
        }
        else if (element2.value==''){
          document.f1.emailerror.value='Fill out the second email field';
          element2.focus()
        }
        else if (element1.value!=element2.value){
          document.f1.emailerror.value='The two emails are not matching';
          element1.select()
        }
        else
          passed=true
        return passed
      }
    </script>
  </head>
  <body>
    <p>Username: <br/>
       <input class="tb10" type="text" name="username" />
    </p><br/>
    <p>Email: <br/>
       <input class="tb10" type="text" name="email1" />
    </p>
    <p>Re-Enter Email: <br/>
       <input class="tb10" type="text" name="email2" />
       <input id="emerror" type="text" readonly name="emailerror"/>
    </p><br/>
    <p>Password: <br/>
       <input class="tb10" type="password" name="password1" onfocus="verify(this.email1,this.email2)";/>
    </p>
  </body>
</html>

Why use onfocus in the password field? Why not just use onblur in the email fields? This way, the user isn't required to click into the password field for the code to be activated. — Patch
– Patch, Commented Jun 16, 2012 at 5:55

nnnnnn · Accepted Answer · 2012-06-16 05:54:00Z

3

There are a few problems. The first is in the way you call your function:

onfocus="verify(this.email1,this.email2)";

this will be the field that that event belongs to, i.e., the one getting focus, so it doesn't have email1 and email2 properties. (Note also you don't need a semicolon outside the quotes.)

Secondly, within your function you say:

document.f1.emailerror

But there is no f1 form in your html.

If you add a form element around your fields, give it the name f1, and update your inline onfocus as follows then it will work:

onfocus="verify(document.f1.email1,document.f1.email2)"

Demo: http://jsfiddle.net/jJ3YT/

Note: I don't really endorse the approach you've taken here - if it were me, I'd put the validation on blur out of both email fields, but only to display the message, not to force focus back into the first field. Then when the form is actually submitted if there is still a problem then maybe I'd force focus back to the problem field. But anyway for what you're trying to do you're almost there...

answered Jun 16, 2012 at 5:54

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1452106 Over a year ago

Always a pleasure to be beaten to the punch with a very thorough and easy to understand answer with a working fiddle, to boot. =)

Nasser Over a year ago

Thanks it works. Now I am trying to hide the text field where the error message shows up. I did some changes but it didn't work. The code in this link jsfiddle.net/jJ3YT/1

nnnnnn Over a year ago

The new problem is that the line var h = document.f1.emailerror; runs before the field exists because the script runs before the document has been parsed, which means h doesn't actually refer to that field and you can't use it to set the style. Move that line inside the function and it will work as shown here: jsfiddle.net/jJ3YT/2

nnnnnn Over a year ago

Having said that, I'd recommend something more like this: jsfiddle.net/jJ3YT/3 - i.e., use a <span> element for your error message and you don't need to worry about hiding it and showing it (when the message is an empty string there's nothing to see). Note that span elements don't have a .value property: use .innerHTML as shown in the updated demo.

Collectives™ on Stack Overflow

Two textfield validation using JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related