Menu icon Foundation
Abide Help: ajax form inside Reveal Modal

Using Foundation 6.2.3 and have a form inside of a reveal modal that submits user's name and email to my Constant Contact list. I'm using Abide for validation, which seems to be working, but the form still submits whether it clears validation or not. My JS skills are slim so I've taken bits and pieces from different sources, trying to piece it together. Here's what I have so far:

Reveal Modal:

<div class="reveal" id="mailModal" data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
									
  <form data-abide novalidate id="ctct_signup" action="https://visitor2.constantcontact.com/api/signup" method="post">
    <div data-abide-error class="alert callout" style="display: none;">
      <p><i class="fi-alert"></i> There are some errors in your form.</p>
    </div>
									  
    <input id="cc-email" name="email" type="email" pattern="email" style="font-family:Brandon Grotesque Regular, FontAwesome" placeholder="&#xf0e0; Email" required>    <br/>
    <span class="form-error">
      Email address required
    </span>
	
    <input id="cc-first-name" name="first_name" type="text" pattern="text" placeholder="First name" required><br/>
    <span class="form-error">
      First name required
    </span>
										
    <input id="cc-last-name" name="last_name" type="text" pattern="text" placeholder="Last name" required><br/>
    <span class="form-error">
      Last name required
    </span>
										
    <input type="hidden" name="ca" value="xxxxxxxxxxxxx">
    <input type="submit" class="button">
									
  </form><!--#ctct_signup-->

<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

</div><!-- #mailModal END -->

And here's what I placed in the footer, pieced together from posts on this forum and the Constant Contact documentation:

<script>
$(document)
$("#ctct_signup").bind("submit", function(e) {
  e.preventDefault();
  console.log("submit intercepted");
})
$("#ctct_signup").bind("formvalid.zf.abide", function(e,$form) {
  // ajax submit
  var formData = $("#ctct_signup").serialize();
// process the form
$.ajax({
type : 'POST', // HTTP method, always use POST for our form
url : 'https://visitor2.constantcontact.com/api/signup', 
data : formData, // serialized form data
dataType : 'json', // the type of data we expect back from the server
success: function(data){
$("#ctct_signup").replaceWith("<h3>Thank you for joining our mailing list!</h3>"); 
},
error: function(response) {
$("#ctct_signup").replaceWith("<p>The server returned an error: Status " + 
response.status + ": " + response.responseText + ". Please try again later.</p>");}
});
});</script>

The result is that abide alerts work but nothing is stopping the form from submitting, even with errors. For example, if I fill in the email input incorrectly and move to the next input, all the error messages for every input will pop up. If I then click submit, the alert callout will appear ("There are some errors in your form.") and a second later the whole form will be replaced with the ajax error response.  

Help? 

abideAJAXrevealfoundation 6

Using Foundation 6.2.3 and have a form inside of a reveal modal that submits user's name and email to my Constant Contact list. I'm using Abide for validation, which seems to be working, but the form still submits whether it clears validation or not. My JS skills are slim so I've taken bits and pieces from different sources, trying to piece it together. Here's what I have so far:

Reveal Modal:

<div class="reveal" id="mailModal" data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
									
  <form data-abide novalidate id="ctct_signup" action="https://visitor2.constantcontact.com/api/signup" method="post">
    <div data-abide-error class="alert callout" style="display: none;">
      <p><i class="fi-alert"></i> There are some errors in your form.</p>
    </div>
									  
    <input id="cc-email" name="email" type="email" pattern="email" style="font-family:Brandon Grotesque Regular, FontAwesome" placeholder="&#xf0e0; Email" required>    <br/>
    <span class="form-error">
      Email address required
    </span>
	
    <input id="cc-first-name" name="first_name" type="text" pattern="text" placeholder="First name" required><br/>
    <span class="form-error">
      First name required
    </span>
										
    <input id="cc-last-name" name="last_name" type="text" pattern="text" placeholder="Last name" required><br/>
    <span class="form-error">
      Last name required
    </span>
										
    <input type="hidden" name="ca" value="xxxxxxxxxxxxx">
    <input type="submit" class="button">
									
  </form><!--#ctct_signup-->

<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

</div><!-- #mailModal END -->

And here's what I placed in the footer, pieced together from posts on this forum and the Constant Contact documentation:

<script>
$(document)
$("#ctct_signup").bind("submit", function(e) {
  e.preventDefault();
  console.log("submit intercepted");
})
$("#ctct_signup").bind("formvalid.zf.abide", function(e,$form) {
  // ajax submit
  var formData = $("#ctct_signup").serialize();
// process the form
$.ajax({
type : 'POST', // HTTP method, always use POST for our form
url : 'https://visitor2.constantcontact.com/api/signup', 
data : formData, // serialized form data
dataType : 'json', // the type of data we expect back from the server
success: function(data){
$("#ctct_signup").replaceWith("<h3>Thank you for joining our mailing list!</h3>"); 
},
error: function(response) {
$("#ctct_signup").replaceWith("<p>The server returned an error: Status " + 
response.status + ": " + response.responseText + ". Please try again later.</p>");}
});
});</script>

The result is that abide alerts work but nothing is stopping the form from submitting, even with errors. For example, if I fill in the email input incorrectly and move to the next input, all the error messages for every input will pop up. If I then click submit, the alert callout will appear ("There are some errors in your form.") and a second later the whole form will be replaced with the ajax error response.  

Help?