jQuery form validation engine not working properly on equals

Question

I just downloaded the jQuery plugin form validation engine. Everything worked good so far until I check if the passwords match. If both the password field and the confirm password field is left blank, the error message "Fields don't match" doesn't come up, which is fine since they do match. But when I type something in the password text box and type the same password in the confirm text box, the error message stays up "Fields do not match" when clearly they do.

HTML:

<form id = "signup">
  <label>Password:</label>
  <input type = "password" name = "txtPassword" id = "txtPassword" class = "validate[required,minSize[6],maxSize[50]]"/>
  <label>Confirm Password:</label>
  <input type = "password" name = "txtCPassword" id = "txtCPassword" class = "validate[required,equals[txtPassword]]"/>
</form>

My JS file:

$(document).ready(function(){
    $("#signup").validateEngine();
});

In my HTML file, I have links to the validation css styles, as well as the validation engine and the en language.

Courland

Works for me : jsfiddle.net/bWnjc/1 if you're talking about github.com/posabsolute/jQuery-Validation-Engine (which seems like it) – Darrickdarrill

@Darrickdarrill That's strange. >.> It's not working on my local server. So I uploaded it to a test server and it's doing the same thing. I even changed the password fields to text fields to make sure that they're the same. www.vrbj.webs.com/scrapbook – Courland

So I tried the equals on the email / confirm email and that works like a charm. But I've read my code over and over and can't solve the problem with the passwords. This is really frustrating. – Courland

I figured out some strange thing that works. Instead of having the first password field txtPassword, i changed it to txtpassword (all lowercase). For some reason that works. If anybody knows as to why that happened? I would love to know, thanks! – Courland

Sorry to waste everyone's time :P I have discovered that I had two input elements of the same ID. One in the signin form, and one in the signup form. This is my first site that I'm working on where the signin and signup were on the same page. – Courland

Put it as an answer and accept it. It shouldn't stay as "unanswered". – Darrickdarrill

i just include jquery-1.7.2.min.js file and works fine for me – Rancourt

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Mechanize

Answer 1

I've found the solution to my question. For some reason I had to input elements with the same id, therefore it wasn't taking the value of the input field that I wanted. :P Simple but dangerous programming mistake. If anyone else runs into this problem, make sure your id's are unique!!!

Courland

Thanks, Im glad I found this post - saved me a lot of head scratching! – Poohpooh

I just solved mine, I had multiple password input field - one for login and another for registration. This is dangerous situation and you won't find any mistake which might causing this problem. Just a quick search of the id of the malfunctioning field will be a fortune ;) – Slippery

Answer 2

You can try this:

<form id = "signup">
  <label>Password:</label>
  <input type = "password" name = "txtPassword" id = "txtPassword" class = "validate[required,minSize[6],maxSize[50]]"/>
  <label>Confirm Password:</label>
  <input type = "password" name = "txtCPassword" id = "txtCPassword" class = "validate[required,equals[txtPassword]]"/>
</form>

$("#signup").validationEngine();

..make sure that your jQuery is validation not validate

Spikes

Answer 3

if you want to check confirm password validation, then you can use

<label>Password:</label>
<input type="password" id="password" name="password"  class="validate[required]"/>

<label>Confirm Password:</label>   
<input type="password" id="confirm_password" name="confirm_password"  class="validate[required,equals[password]]"/>

Broncobuster