Check if two fields has the same value with javascript

Question

I want to make a form for registration and the form should have two fields for password, so there is no mix up.
So if the passwords are the same, there should be a green bock right to the field, and if not there should be a red cross..

So here is my code for testing, but it doesn't work.

<script language="javascript" type="text/javascript">
function check()
{
    var loc;
    if (test.name1.value == test.name2.value) {
        loc = "/img/greenbock.jpg";
    }
    if (test.name1.value != test.name2.value) {
        loc = "/img/redcross.jpg";
    }
    return loc;
}
</script>
</head>

<body>
<form name="test" method="post" action="">
Name<br />
<input name="name1" type="text" /><br />
Name agian<br />
<input name="name2" type="text" onblur="check()" />
<script language="javascript" type="text/javascript">
if(loc != "")
{
document.write("<div style=\"height:19px; width:20px; background-image:url("+ loc + ")\"></div>");
}
</script>
<br />
Username<br />
<input name="username" type="text" /><br />

So where am I wrong? A little fault or, should i thruw everything away?

[edit]
Now I have set the check-function to run the script after input. So now its doing samething, because everything disapears.. Solutions?

Have you checked the browser console for errors? That's pretty much the first thing you should do. — Pointy
– Pointy, Commented Feb 8, 2014 at 16:13
check() should probably be responsible for drawing the div with the image. As you have it, you won't actually ever see the image because the script below the input field will have already run before check() does. — Cᴏʀʏ
– Cᴏʀʏ, Commented Feb 8, 2014 at 16:17

Cᴏʀʏ · Accepted Answer · 2014-02-08 16:43:02Z

My suggestion would be to let the style of the error/success images be controlled with CSS. Then your validation function can decide what CSS class to assign to a <div> sitting next to your input fields.

Additionally, you will need to add the check() to the other name input in case the user returns to either field later and makes a change.

CSS

/* Shared styling */
.validation-image {
    height:19px; 
    width:20px;
    display: none;
}

/* Error styling */
.validation-error {
    background-color: #ff0000;
    background-image: url('/img/redcross.jpg');
}

/* Success styling */
.validation-success {
    background-color: #00ff00;
    background-image: url('/img/greenbock.jpg');
}

HTML

<form name="test" method="post" action="">Name
    <br />
    <input name="name1" type="text" onblur="checkNames()" />
    <br />Name agian
    <br />
    <input name="name2" type="text" onblur="checkNames()" />
    <div id="nameValidation" class="validation-image"></div>
    <br />Username
    <br />
    <input name="username" type="text" />
    <br />
</form>

JavaScript

function checkNames() {
    // Find the validation image div
    var validationElement = document.getElementById('nameValidation');
    // Get the form values
    var name1 = document.forms["test"]["name1"].value;
    var name2 = document.forms["test"]["name2"].value;
    // Reset the validation element styles
    validationElement.style.display = 'none';
    validationElement.className = 'validation-image';
    // Check if name2 isn't null or undefined or empty
    if (name2) {
        // Show the validation element
        validationElement.style.display = 'inline-block';
        // Choose which class to add to the element
        validationElement.className += 
            (name1 == name2 ? ' validation-success' : ' validation-error');
    }
}

Of course, this is a lot more code than you had before, but you could turn this into a re-usable function pretty easily.

jsFiddle Demo

Krish R · Accepted Answer · 2014-02-08 16:15:32Z

0

Try this, document.test.name1.value or document.forms["test"]["name1"].value instead of test.name1.value

should be

 var loc;
 var name1=document.forms["test"]["name1"].value;
 var name2=document.forms["test"]["name2"].value;

 if(name1== name2){
    loc = "/img/greenbock.jpg";
  }else {
    loc = "/img/redcross.jpg";
 }

answered Feb 8, 2014 at 16:15

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Collectives™ on Stack Overflow

Check if two fields has the same value with javascript

2 Answers 2

CSS

HTML

JavaScript

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CSS

HTML

JavaScript

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related