Required Field Responses Not Working

[toad78]

#1) I have a custom form that posts to Constant Contact that requires First, Last and Email, but I can’t get the error response codes to post correctly for the First and Last Name. Email works fine.

#2) All fields are required but if a user just enters in their Email address without the First/Last, the form is still sendable.

#3) If I do not create customized error outputs for each field and customize the input fields for each field (i.e., use ) and just use 'localizedErrMap[‘requried’], then that error output works fine. But for WCAG reasons, I need to have each field be a unique output error message.

       <form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" role="form" id="signup">
           <h3 style="text-align: center;">STAY CONNECTED!<br />Sign up for our monthly newsletter &amp; alerts</h3>
          
           <!-- The following code must be included to ensure your sign-up form works properly. -->
           <input data-id="ca:input" type="hidden" name="ca" value="be455d59-593e-4ea5-81b7-fff6d6b09a3d">
           <input data-id="list:input" type="hidden" name="list" value="1">
           <input data-id="source:input" type="hidden" name="source" value="EFD">
           <!--<input data-id="required:input" type="hidden" name="required" value="email,first_name,last_name">-->
		   <input data-id="required:input" type="hidden" name="email" value="email">
		   <input data-id="required:input" type="hidden" name="first_name" value="first_name">
		   <input data-id="required:input" type="hidden" name="last_name" value="last_name">
           <input data-id="url:input" type="hidden" name="url" value="">
           <p data-id="Email Address:p" ><label data-id="Email Address:label" data-name="email" class="ctct-form-required" for="email">Email Address</label> <input data-id="Email Address:input" type="text" name="email" value="" maxlength="80" id="email" tabindex="1"></p>
           <p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name" class="ctct-form-required" for="first name">First Name</label> <input data-id="First Name:input" type="text" name="first_name" value="" maxlength="50" id="first name" tabindex="2"></p>
           <p data-id="Last Name:p" ><label data-id="Last Name:label" data-name="last_name" class="ctct-form-required" for="last name">Last Name</label> <input data-id="Last Name:input" type="text" name="last_name" value="" maxlength="50" id="last name" tabindex="3"></p>
           <button type="submit" class="ctct-button Button--block Button-secondary blue-button" data-enabled="enabled" tabindex="4">Sign Up</button></form>

<script>
   var localizedErrMap = {};
   localizedErrMap['required'] = 	'This field is required.';
   localizedErrMap['ca'] = 		    'An unexpected error occurred while attempting to send email.';
   localizedErrMap['email'] =   	'Please enter your email address in name@email.com format.';
	localizedErrMap['first_name'] =   	'Please enter your First Name.';
	localizedErrMap['last_name'] =   	'Please enter your Last Name.';
   localizedErrMap['generic'] = 	'This field is invalid.';
   localizedErrMap['shared'] = 		'Sorry, we could not complete your sign-up. Please contact us to resolve this.';
   var postURL = 'https://visitor2.constantcontact.com/api/signup';
</script>
<script type='text/javascript' src='http://domainmamehere.com/js/signup-form.js'></script>