Using jQuery to Confirm Email before Submitting a Form

Programmers

jQuery Signup Form confirm email

Despite a change in the last 10 years in almost every major portion of internet technology, email marketing still firmly holds a prominent place in online marketing techniques.

There are a variety of companies that handle the complicated task of actually sending emails including Constant Contact and MailChimp. I’m personally partial to MailChimp because of their updated design and general ease of use, but I’ve had customers get great results from Constant Contact as well.

Horse Trails & Camping Across America (HTCAA) recently contacted me about building an “in construction” page. They needed a sign up form that would integrate with MailChimp. The process was fairly straight-forward (and the people great to work with!). The only thing I found missing in MailChimp’s form builders was a field for confirming the email the user entered… which was a requirement for this project.

What We’re Making

I’ll be showing how to use jQuery to compare two fields. If the fields match, the submit button is enabled. If they don’t, it’s disabled and greyed out.

While I created this coding at the bottom of the jQuery for an integrated form from MailChimp, it can be used with any form or even any field you’d like entered twice (ie. “Password”).

Prerequisites

Before we start, you’ll need to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Also, I’m assuming you have other qualifications for your form (like all fields filled in before you submit). I won’t be talking about those steps today; this post is purely for confirming two fields are matching.

The jQuery

We’ll start by disabling the submit button when the page loads (or you can get the final, complete code at the bottom of this post):

$('#mc-embedded-subscribe').attr('disabled', 'disabled').addClass('button3');

The ID “#mc-embedded-subscribe” is the ID for the Submit Button for the form. Next we’ll change two things: an attribute “attr” set to disabled, and we’ll add a class “button3” (defined in our CSS) that will change the button’s visual look so that the user understands it doesn’t work.

Next comes the fun part! We’ll take the two fields (mce-EMAIL and mce-EMAIL2) that we’re going to compare, and add a little hook to them called “change“. So the first line above says “if either of these fields changes, the following function must occur“.

$('#mce-EMAIL, #mce-EMAIL2').change(function(){
 if ($('#mce-EMAIL').val() == $('#mce-EMAIL2').val()){
 $('#mc-embedded-subscribe').removeAttr('disabled').removeClass('button3');
 } else {
 $('#mc-embedded-subscribe').attr('disabled', 'disabled').removeAttr('disabled').addClass('button3');
 }
});

So we’re running a function every time the user changes a letter in either of the fields. The function consists of lines 2 through 6.

Line 2, we’re going to compare the value of these fields and, if they match, remove the “disabled” attribute and remove the class “button3“.

Else, in Line 4, if the two don’t match, we’ll confirm that the attribute “disabled” is still there and we’ll make sure the class “button3” is still there.

Alternatively, you could use toggleClass instead of addClass/removeClass, but I like stating exactly what will happen in this instance.

That’s it! Check out the jsFiddle below for the complete code (including the form and CSS).

The Complete Code

Want to check out the final page? HTCAA.org

Comments