UW Oshkosh How-To's: How to prevent PloneFormGen form submit unless two email addresses match

You may have a PloneFormGen form that asks TWICE for an email address, if it's important that the address be entered correctly.  You do not want the form to be submittable unless both email addresses are the same.

This JavaScript checks that the two email address fields contain the same value, and displays an alert message box if the email addresses do not match.  It also prevents the user from being able to submit the form until the email addresses match.

The assumptions here are that:

• The PloneFormGen form has the ID "upload-materials"
• The two email address fields are string fields and have the IDs applicants-email-address and applicants-email-address-1

jq(document).ready(function(){  
	$( "#applicants-email-address" ).on( "blur", function() {
		if ($(this).val() != $( "#applicants-email-address-1" ).val()) {
			alert( "Applicant email addresses do not match!" );
		} 
	});

	$( "#applicants-email-address-1" ).on( "blur", function() {
		if ($(this).val() != $( "#applicants-email-address" ).val()) {
			alert( "Applicant email addresses do not match!" );
		} 
	});

	$( "#fg-base-edit" ).submit(function( event ) {
		if ($('#applicants-email-address').val() != $('#applicants-email-address-1').val()) {
			alert( "Applicant's email addresses do not match! Please correct and retry." );
			event.preventDefault();
		}
	});
});

• Add this JavaScript by going to the ZMI -> portal_skins -> custom and adding a new File object.  Give it a name, "compare_email_addresses.js" for example.
• Register this JavaScript by going to the ZMI -> portal_javascripts and scrolling to the bottom and adding the ID "compare_email_addresses.js".  To make this file load only on the specific form, specify a condition such as python: context.id == 'upload-materials', where upload-materials is the ID of the form. Press the Save button.
• Test this by reloading the form in your browser.