CiviCRM Community Forums (archive)

Hey all,

Since the  e-mail address  is often the most important information collected from a contact, many organisations ask to enter it twice, thus  drastically reducing  the chance that an e-mail address contains typos.

Does anything like that exist in CiviCRM or could it be set up easily somehow?

Simon

I have done what Lobo suggested, and produced some jQuery code which, when executed on a page containing a CiviCRM profile's create or edit form, will duplicate any email entry fields and will not let the form be submitted until the fields match.

Just put the following code in <CustomTemplatesDir>/CRM/Profile/Form/Edit.extra.tpl, then try out a profile create or edit form, e.g. /civicrm/profile/create?reset=1&gid=2. You should see that any email fields have been doubled up.

{literal}
<script type="text/javascript">
var emailMismatchErrorMessage = "Email address fields must match.";

// Check that a form's email fields match.
function compareEmailFields() {
var allEmailsMatch = true;

cj("div.crm-section[class*=email-]", this).not(".email-section-clone").each(function () {
var emailRowElems = cj(this).next(".email-section-clone").andSelf();
if (cj("[type=text]", emailRowElems.first()).val() != cj("[type=text]", emailRowElems.last()).val()) {
// Mismatch: Add error indicators (if not present already).
cj("[type=text]", emailRowElems).parent().not(":has(span.crm-error:contains(" + emailMismatchErrorMessage + "))").append(" <span class=\"crm-error\">" + emailMismatchErrorMessage + "</span>");
cj("label", emailRowElems).not(":has(span.crm-error)").wrapInner("<span class=\"crm-error crm-error-label\" />");
allEmailsMatch = false;
} else {
// Match: Remove error indicators (except any needed for other, unrelated errors).
cj("[type=text]", emailRowElems).nextAll("span.crm-error:contains(" + emailMismatchErrorMessage + ")").remove();
cj("label span.crm-error", emailRowElems.not(":has([type=text] ~ span.crm-error)")).contents().unwrap();
}
});

// If all values match, delete the clone fields so that they don't get submitted with the form.
if (allEmailsMatch) cj("div.email-section-clone", this).remove();

return allEmailsMatch;
}

cj(function () {
cj("form#Edit, form#Register").each(function () {
// Clone all email fields.
cj("div.crm-section[class*=email-]", this).each(function () {
var cloneEmailRowElem = cj(this).clone();

// Differentiate the cloned field.
cj("label:not(:has(span.crm-error)), label span.crm-error", cloneEmailRowElem).prepend("Retype ");
cloneEmailRowElem.addClass("email-section-clone");
cj.each(["id", "name", "for"], function (index, attr) {
cloneEmailRowElem.filter("[" + attr + "]").add(cj("[" + attr + "]", cloneEmailRowElem)).attr(attr, function (index, attr) {
return attr + "-clone";
});
});

cloneEmailRowElem.insertAfter(this); // Insert the cloned field after the original.
});

// Add event handler to the form to check email fields on submission.
cj(this).submit(compareEmailFields);

// If the form's submit button has an onclick attribute, that could bypass the form's submit handler, so insert the check into it.
var formId = this.id;
cj("input[type=submit][onclick]", this).attr("onclick", function (index, attr) {
return "if (!compareEmailFields.call(document.getElementById('" + formId + "'))) return false; " + attr;
});
});
});
</script>
{/literal}

I have tried to make the code fairly resilient and fit in with the way that CiviCRM displays fields and indicates input errors on profile forms. I have tested it on Drupal 7.15 and CiviCRM 4.2, in Chrome, FireFox and IE9.

EDIT: It now works for built-in profile pages, embedded profile HTML snippets and event registration forms. It works when there are multiple email fields in a form, and when there are multiple profile forms on a page.

I think this code could be quite useful for other people. I don't have the time to take it further, but developers are welcome to take it as is, improve on it and integrate it into CiviCRM.

Hi Simon,

Thanks for your feedback. The reason it wasn't working for event registration forms is that they use different HTML to built-in profile pages. I have rewritten the code above so that it now works for event registration forms and profile HTML snippets as well as for built-in profile pages.

For each type of page where you need double-entry of email addresses (e.g. built-in profile pages, pages with embedded profile HTML snippets, event registration pages, etc) the code needs to be in a different place. So, instead of copying the above code to several locations, I recommend putting the JavaScript code into a file of its own where it can be included from anywhere. I've put mine in <CustomPhpDir>/js/jquery/jquery.emaildoubleentry.js. I've then included that JavaScript file from <CustomTemplatesDir>/CRM/Profile/Form/Edit.extra.tpl for built-in profile pages, from <CustomTemplatesDir>/CRM/Event/Form/Registration/Register.extra.tpl for event registration forms, and at the bottom of any page that contains a profile HTML snippet.

Kirk

Here's a quick update of this code to work on the Registration form in Civi 4.4 - I'm sure with a little more polish it could be made to work on the other fields too, Registration is just the one I needed it on.

{literal}
<script type="text/javascript">
var emailMismatchErrorMessage = "Email address fields must match.";

// Check that a form's email fields match.
function compareEmailFields() {
        var allEmailsMatch = true;

        cj("div.crm-section[class*=email-]").not(".email-section-clone").each(function () {
                var emailRowElems = cj(this).next(".email-section-clone").andSelf();
                if (cj("[type=text]", emailRowElems.first()).val() != cj("[type=text]", emailRowElems.last()).val()) {
                        // Mismatch: Add error indicators (if not present already).
                        cj("[type=text]", emailRowElems).parent().not(":has(span.crm-error:contains(" + emailMismatchErrorMessage + "))").append(" <span class=\"crm-error\">" + emailMismatchErrorMessage + "</span>");
                        cj("label", emailRowElems).not(":has(span.crm-error)").wrapInner("<span class=\"crm-error crm-error-label\" />");
                        allEmailsMatch = false;
                } else {
                        // Match: Remove error indicators (except any needed for other, unrelated errors).
                        cj("[type=text]", emailRowElems).nextAll("span.crm-error:contains(" + emailMismatchErrorMessage + ")").remove();
                        cj("label span.crm-error", emailRowElems.not(":has([type=text] ~ span.crm-error)")).contents().unwrap();
                }
        });
        return allEmailsMatch;
}

function compareEmailFieldsForSubmit() {
        var allEmailsMatch = compareEmailFields();
        // If all values match, delete the clone fields so that they don't get submitted with the form.
        if (allEmailsMatch) {
                cj("div.email-section-clone").remove();
                cj('.form-submit').enable();
        }
        return allEmailsMatch;
}

cj(window).load(function () {
        cj("form#Register").each(function () {
                // Clone all email fields.
                cj("div.crm-section[class*=email-]", this).each(function () {
                        var cloneEmailRowElem = cj(this).clone();
                        cj(this).find("input").focus(function(){cj('.form-submit').enable()});

                        // Differentiate the cloned field.
                        cj("label:not(:has(span.crm-error)), label span.crm-error", cloneEmailRowElem).prepend("Retype ");
                        cloneEmailRowElem.addClass("email-section-clone");
                        cloneEmailRowElem.find("input").val("");
                        cloneEmailRowElem.find("input").focus(function(){cj('.form-submit').enable()});
                        cj.each(["id", "name", "for"], function (index, attr) {
                                cloneEmailRowElem.filter("[" + attr + "]").add(cj("[" + attr + "]", cloneEmailRowElem)).attr(attr, function (index, attr) {
                                        return attr + "-clone";
                                });
                        });

                        cloneEmailRowElem.insertAfter(this); // Insert the cloned field after the original.
                });
        });
cj('form#Register').submit(compareEmailFieldsForSubmit);
});
</script>
{/literal}