Essentials:

WordPress Password Field Validator

Wordpress Password Email Verify Compare Script

I recently hit a wall with the Contact Form 7 plug in for WordPress. I needed to do something that the plug in is unable to do at this point. It is assumed that you have some clue what I’m talking about and are not afraid of getting into a little bit of hand coding. Backup your work before trying this.

The goal is as follows. Create a form which may be used to compare email address or password fields using the Contact Form 7 for WordPress and report back in real time if the two form elements match. And hide the text that is typed if we are using password fields.

In my case I needed a password field in a form with the ‘password’ type of input field which hides the actual letters with bullets as they are typed. I also needed to compare the contents of the password fields since I would no longer be able to see what I was typing. Contact Form 7 (CF7) doesn’t allow the password type of input field let along field comparison checking. But with a little bit of ‘outside of the box’ thinking I quickly found a way around this lacking feature.

While there are hacks out there which can be applied directly to the CF 7 plug in you will quickly find that whenever you update your plugin’s you need to re-apply your changes.

Here’s the work around.

Simply put, install the “Real-Time Search and Replace” plugin by Marios Alexandrou. You may also see it named as “Real-Time Find and Replace.” Make this plug in part of your regular arsenal of WordPress plugin’s. We also need to add a little bit of JavaScript to the mix.

STEP 1.

Write some JavaScript which will handle the form input field checking and report back the status.

code    
function checkPass(){
      //Store the password field objects into variables ...
      var pass1 = document.getElementById('password1');
      var pass2 = document.getElementById('password2');
      //Store the Confimation Message Object ...
      var message = document.getElementById('confirmMessage');
      //Set the colors we will be using ...
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      //Compare the values in the password field and the confirmation field
      if(pass1.value == pass2.value){
        //The passwords match.
        //Set good color and inform user of correct password
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
 
        message.innerHTML = "Passwords Match!"
      }else{
        //The passwords do not match.
        //Set bad color and notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
      }
    }

STEP 2.

Create your form that has the password fields in it. Be sure to paste the JavasScript from above into the CF7 form editor above your form elements.

code    
Desired Username (required): [text* username]
Email Address (required) [email* your-email]
Password (required) [text* password1]
Confirm Password (required) [text* password2]
Code [captchac code fg:#ffffff bg:#5393b4 size:m]
Re Type Code (required) [captchar code /5]
[submit "Apply"]

Note: the added code which is used to display the status of the comparison of the input fields.

STEP 3.

Use the ‘Real-Time Search and Replace’ plug in to make some modifications to the CF7 form before sending it to the browser.

Navigate to Dashboard > Tools > Real-Time Search and Replace. We will add two entries. Click the ‘Add’ link TWO times in the plug in.

In my example I will use my form names. But you should use your own if they differ from mine or if you are using the CF7 email input type.

In the ‘Find’ field enter:
type=”text” name=”password1″

In the ‘Replace’ field enter:
type=”password”  name=”password1″ id=”password1″

For the second ‘Find’ field, enter:
type=”text” name=”password2″ id=”password2″

For the second ‘Replace’ field, enter:
type=”password” name=”password2″ id=”password2″ onkeyup=”checkPass(); return false;”

Click the ‘Update Settings’ and you should be done.

Now embed your CF7 form short code (example: [contact – form 7 ”Register”]) into your page, publish,  and take a look at it.

I am using this same bit of code on a project which can be seen here:
http://www.walshtrails.com/register

Search with these terms to find more content:

Terms: WordPressPasswordFieldValidator|Pinwire com, contact form 7 password and comfirmation password, contact form 7 confirm password and email, contact form 7 password, contact form 7 password create, password validation wordpress, The Username field is required The Email field is required The Password field is required The Password Confirmation field is required Username Email Password Confirm Password Sign up  
Add a comment

Comments (35)

  1. John Crumpton Wednesday - 23 / 03 / 2011 Reply
    Great tutorial, thank you! Bizarrely the plugin is called Real Time Find and Replace in the wordpress repository, however once installed it's Real-Time Search and Replace http://wordpress.org/extend/plugins/real-time-find-and-replace/
  2. Arkanos Tuesday - 29 / 03 / 2011 Reply
    Hi. I'm sorry, but I follow every step to validate 2 mail fields, but it can't work for me. Any suggestion?
  3. Toni Tuesday - 19 / 04 / 2011 Reply
    Hi, I'm trying to figure out where to put the javascript code. When you say Be sure to paste the JavasScript from above into the CF7 form editor above your form elements. Are you refering to the page where you edit the contacts form fields?
  4. Toni Tuesday - 19 / 04 / 2011 Reply
    Opps i figured it out after i confused myself!!!!!!!pls disregard. Great plugin!!!!
  5. brett Saturday - 07 / 05 / 2011 Reply
    hello im trying to implement this hack - i've even used the demo you've provided. basically no box is popping up to tell me the fields are wrong (or right). any help would be greatly appreciated
  6. Dragos Friday - 13 / 05 / 2011 Reply
    Sorry, but with Wordpress 3.1.2 it doesn't work. It transforms the fields in password fields, but it doesn't validate. And also, I think your code is wrong for the second Find field. If I write it like it is, it doesn't do the replacement. If I cut the id atribute, and maintain it only for replacement, it shows the second field, too. But it doesn't match the two passwords, no matter what I do. Any ideas?
  7. Tom Friday - 13 / 05 / 2011 Reply
    This mod does work with the latest version of Wordpress. I suspect there is probably a javascript conflict with your theme or a plugin you are using. It is up and running here http://www.walshtrails.com/register without any errors. Do you have a site I can look at? -Tom
  8. Felix Maier Friday - 20 / 05 / 2011 Reply
    you forgot the onkeyup="checkPass(); in your tutorial
  9. Tom McGuire Friday - 20 / 05 / 2011 Reply
    Felix, You are absolutley correct. I had added the onkeyup in the code that is in place but failed to add it to this tutorial. Great find. Please see above for the addition/correction.
  10. Laimis Saturday - 04 / 06 / 2011 Reply
    The quotation marks in your code are different: type=”text” name=”password1″ should be " type="text" name="password1" The code worked for me only when changed to the latter quotation marks.
  11. Michael Wednesday - 15 / 02 / 2012 Reply
    Works great as a way to confirm a user's email. Thanks so much!
  12. Kim Monday - 27 / 02 / 2012 Reply
    wow! really nice plugin... can solve a lot of little fixes without touching the plugin-code itself :) thx mate!
  13. Max W Sunday - 04 / 03 / 2012 Reply
    I have tried this with no luck. The password text field is showing up as *** (dots) when something is typed in but the validation is not working. Can someone confirm this works with the latest wordpress and CF7? The code I have put in my form is the same as above: function checkPass(){ //Store the password field objects into variables ... var pass1 = document.getElementById('password1'); var pass2 = document.getElementById('password2'); //Store the Confimation Message Object ... var message = document.getElementById('confirmMessage'); //Set the colors we will be using ... var goodColor = "#66cc66"; var badColor = "#ff6666"; //Compare the values in the password field and the confirmation field if(pass1.value == pass2.value){ //The passwords match. //Set good color and inform user of correct password pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "Passwords Match!" }else{ //The passwords do not match. //Set bad color and notify the user. pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = "Passwords Do Not Match!" } } Desired Username (required): [text* username] Email Address (required) [email* your-email] Password (required) [text* password1] Confirm Password (required) [text* password2] Code [captchac code fg:#ffffff bg:#5393b4 size:m] Re Type Code (required) [captchar code /5] [submit "Apply"]  
  14. Becky Monday - 09 / 07 / 2012 Reply
    This works great except that when my passwords do not match the form still submits. Any ideas?
  15. Martin Wednesday - 08 / 08 / 2012 Reply
    Excelente explicación!!!, me fue muy útil. Gracias, Martín
  16. Sherry Thursday - 06 / 09 / 2012 Reply
    Thank you! I was able to follow your instructions get this working for email fields (not passwords) on the enquiry forms for our campervan hire business in Australia - you can see it working on any of the 'Get a Quote' buttons on our vehicle pages at campervan-australia-hire.com - hopefully no more invalid emails coming though. Thanks for taking the time to post this tutorial!
  17. Mike White Friday - 05 / 10 / 2012 Reply
    @Tom - you just gave me 1.5 hours back into my life. #impactinglives - Thanks a ton! Mike White Urban Shuffle urbanshuffle.com
  18. Travis Naughton Sunday - 14 / 10 / 2012 Reply
    Awesome code. thanks. Also note if you want you can copy the HTML CF7 displays in the code view of the site. copy and past into your template and you can make as many changes as you want to the form. only downside is if you change info in the wp backend it obviously wont take effect on your form.
  19. kansas Monday - 18 / 02 / 2013 Reply
    Thanks for the code it works great! I have a question: I would like to have only one password field that is checking only one pre-chosen password. So if the password is correct it should work. And the password should not be case sensitive (e.g. wordpress and Wordpress should work). At the moment I'm using your code if(pass1.value == pass2.value){... Thats the completely code: Would appreciate help. Thanks a lot
    • Pinwire Monday - 18 / 02 / 2013 Reply
      You could set Pass1 to a hidden field with the value of your real password. The problem with this is that the source password hard coded in the javascript which would NOT be secure at all. I would recommend a completely different approach / solution.
  20. kansas Monday - 18 / 02 / 2013 Reply
    Thank you pinwire for your answer. I'm using Pass2 as a hidden field already with a value. It will be compared with the typed in password in Pass1. But how can I make it not case sensitive? Or how can I use two different passwords? If there is no solution what other solution could you recommend me? Thanks
  21. Jimmy Wednesday - 27 / 02 / 2013 Reply
    Unfortunately this doesn't work anymore. I followed all the steps exactly 3 times now and nothing seems to change.
    • Pinwire Wednesday - 27 / 02 / 2013 Reply
      It still works. There is probably a conflict with a plugin or your theme.
  22. Christian Suter Wednesday - 27 / 03 / 2013 Reply
    I do not quite understand where I place the javascript code I saw your example and is exactly what I need Could you explain where you insert the code thank you very much cordially Christian Suter
  23. george Saturday - 11 / 05 / 2013 Reply
    I've tried two different themes and I can't get it to disquise the 2nd password field. I also can't get the verification for 2nd password to work. See this link: http://www.groovecreative.com/test-form-1 any ideas? (please excuse my styling of the form, trying to get functionality first)
    • george Saturday - 11 / 05 / 2013 Reply
      ok, I noticed that deleting the [ id="password2" ] from the 2nd "Find" field of Real-Time Find and Replace plugin, it disguised the 2nd password now. However, it still does not live verify
  24. Surgeon Thursday - 04 / 07 / 2013 Reply
    The Real-Time Search and Replace plugin definitely doesn't work with the latest version of WordPress (3.5). After much experimenting, I found out that I had to downgrade to WordPress 3.1 and Contact Form 2.4.6 in order for the plugin to work as per abovementioned. Obviously this is not ideal due to the inherent bugs and instability of the older versions, so the author of the RTS&R plugin needs to be contacted and advised that the plugin is buggy.
  25. Ben Monday - 22 / 07 / 2013 Reply
    Tom, Is there a way to simply hide the input in a field from Contact Form 7 without requiring double password entry and verifying one against the other?
  26. Tom Tuesday - 23 / 07 / 2013 Reply
    There is a plugin which extends the functionality of CF7 which can be found here: http://wordpress.org/plugins/contact-form-7-modules/installation I haven't tried it, but the developer says it will allow you to create hidden input fields among other things. -Tom
  27. Matt Saturday - 21 / 09 / 2013 Reply
    Thank you for providing this tip! I used it to successfully add a "Verify Email" entry on a CF7 form. For some reason, I got some paragraph tags () inside the JS code, which didn't work too well, of course. I fiddled around with some stuff I had commented out (I didn't need the message), and I got the paragraph tags to go away. Namely, I changed some comments from // to /* ... */. I would like to know why they were inserted, though, for future reference. Any ideas?
  28. Franco Wednesday - 18 / 12 / 2013 Reply
    Hi Tom, works fine ;-) Thanks for sharing it with us.
  29. Rogair Thursday - 13 / 02 / 2014 Reply
    Hi Tom you mention your form names in your tutorial and say to use your own form names...where exactly were they in your code? I thought I only see field names.
    • Pinwire Thursday - 13 / 02 / 2014 Reply
      By form names.. I meant form element names. This demo is for a VoIP service..so you would of course want to use your own.
  30. Joe Tuesday - 10 / 03 / 2015 Reply
    Hi, I'm really trying to get this working for email validation, but it keeps returning an error. I see this: 'Note: the added code which is used to display the status of the comparison of the input fields.' in your notes above, but see no additional code, only a ? in a diamond... is something missing. Do the email fields need to be of type 'text' to work? Thank you - Joe
  31. weber Wednesday - 18 / 03 / 2015 Reply
    Dont worked for me... the js script breaks my website...

Add a comment

Pinwire @ tumblr

    http://pinwirecom.tumblr.com/post/99399753457http://pinwirecom.tumblr.com/post/99056819727http://pinwirecom.tumblr.com/post/98488475777http://pinwirecom.tumblr.com/post/94745420282http://pinwirecom.tumblr.com/post/92737496842http://pinwirecom.tumblr.com/post/88505613492