Merge pull request #130 from mailchimp/fix/100

Ensure that form data persists when validation fails.

Author: vikrampm1

assets/js/mailchimp.js

@@ -2,37 +2,44 @@
 (function ($) {
 	function mc_beforeForm() {
 		// Disable the submit button
-		$('#mc_signup_submit').attr('disabled', 'disabled');
+		$('.mc_signup_submit_button').attr('disabled', 'disabled');
 	}
 
-	function mc_success(data) {
+	function mc_success(data, status, xhr, submittedForm) {
+		let form = $(submittedForm);
+		if (!submittedForm || !form) {
+			form = $('.mc_signup_form');
+		}
+
 		// Re-enable the submit button
-		$('#mc_signup_submit').removeAttr('disabled');
+		$('.mc_signup_submit_button').removeAttr('disabled');
 
 		// Put the response in the message div
-		$('#mc_message').html(data);
+		form.find('.mc_message_wrapper').html(data);
 
 		// See if we're successful, if so, wipe the fields
-		const reg = /class="|'mc_success_msg"|'/i;
+		const reg = /class=(["'])mc_success_msg\1/i;
 
 		if (reg.test(data)) {
-			$('#mc_signup_form').each(function () {
+			$(form).each(function () {
 				this.reset();
 			});
-			$('#mc_submit_type').val('js');
+
+			$('.mc_submit_type').val('js');
 		}
+
 		window.scrollTo({
-			top: document.getElementById('mc_signup').offsetTop - 28,
+			top: parseInt(form.offset().top, 10) - 28,
 			behavior: 'smooth',
 		});
 	}
 
 	$(function ($) {
 		// Change our submit type from HTML (default) to JS
-		$('#mc_submit_type').val('js');
+		$('.mc_submit_type').val('js');
 
 		// Attach our form submitter action
-		$('#mc_signup_form').ajaxForm({
+		$('.mc_signup_form').ajaxForm({
 			url: window.mailchimpSF.ajax_url,
 			type: 'POST',
 			dataType: 'text',

mailchimp_widget.php

@@ -167,8 +167,8 @@ function mailchimp_sf_signup_form( $args = array() ) {
 	?>
 
 <div id="mc_signup">
-	<form method="post" action="#mc_signup" id="mc_signup_form">
-		<input type="hidden" id="mc_submit_type" name="mc_submit_type" value="html" />
+	<form method="post" action="#mc_signup" id="mc_signup_form" class="mc_signup_form">
+		<input type="hidden" id="mc_submit_type" class="mc_submit_type" name="mc_submit_type" value="html" />
 		<input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
 		<?php wp_nonce_field( 'mc_submit_signup_form', '_mc_submit_signup_form_nonce', false ); ?>
 
@@ -184,7 +184,7 @@ function mailchimp_sf_signup_form( $args = array() ) {
 
 	<div class="mc_form_inside">
 
-		<div class="updated" id="mc_message">
+		<div class="update mc_message_wrapper" id="mc_message">
 			<?php echo wp_kses_post( mailchimp_sf_global_msg() ); ?>
 		</div><!-- /mc_message -->
 
@@ -267,7 +267,7 @@ function mailchimp_sf_signup_form( $args = array() ) {
 		?>
 
 		<div class="mc_signup_submit">
-			<input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />
+			<input type="submit" name="mc_signup_submit" class="mc_signup_submit_button" id="mc_signup_submit" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />
 		</div><!-- /mc_signup_submit -->
 
 		<?php

tests/cypress/e2e/mailchimp-block.test.js

@@ -246,6 +246,22 @@ describe('Block Tests', () => {
 		});
 	});
 
+	it('Form data should persist if validation fails', () => {
+		// Verify
+		const firstName = 'John';
+		const lastName = 'Doe';
+		cy.visit(`/?p=${postId}`);
+		cy.get('#mc_mv_EMAIL').should('exist');
+		cy.get('#mc_mv_FNAME').clear().type(firstName);
+		cy.get('#mc_mv_LNAME').clear().type(lastName);
+		cy.get('#mc_signup_submit').should('exist');
+		cy.get('#mc_signup_submit').click();
+		cy.get('.mc_error_msg').should('exist');
+		cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.');
+		cy.get('#mc_mv_FNAME').should('have.value', firstName);
+		cy.get('#mc_mv_LNAME').should('have.value', lastName);
+	});
+
 	// TODO: Add tests for the Double Opt-in and Update existing subscribers settings.
 	// TODO: Add tests for the block styles settings.
 	// TODO: Add tests for the form submission.

tests/cypress/e2e/settings.test.js

@@ -153,4 +153,22 @@ describe('Admin can update plugin settings', () => {
 			cy.get('#mc_unsub_link').should('not.exist');
 		});
 	});
+
+	it('Form data should persist if validation fails', () => {
+		// Verify
+		[shortcodePostURL, blockPostPostURL].forEach((url) => {
+			const firstName = 'John';
+			const lastName = 'Doe';
+			cy.visit(url);
+			cy.get('#mc_mv_EMAIL').should('exist');
+			cy.get('#mc_mv_FNAME').clear().type(firstName);
+			cy.get('#mc_mv_LNAME').clear().type(lastName);
+			cy.get('#mc_signup_submit').should('exist');
+			cy.get('#mc_signup_submit').click();
+			cy.get('.mc_error_msg').should('exist');
+			cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.');
+			cy.get('#mc_mv_FNAME').should('have.value', firstName);
+			cy.get('#mc_mv_LNAME').should('have.value', lastName);
+		});
+	});
 });