Foundation Reveal on AJAX success not working

Question

Attempted to post this on the Foundation forum, but for some reason it would not post.

The first code snippet below shows the working code for my form using data-abide="ajax", and the .on('valid.fndtn.abide',function(){});. The elements are disabled etc. and the modal opens. When the modal is closed I remain on the page as desired.

I am attempting to now have this use AJAX, where the request will be to a php script handling the data insert, and the element manipulation and modal will happen on success.

The second code snippet shows that attempt, which is not working. When I run this code, the alert fires, but then the page submits, with nothing written to the console, no modal, and the page refreshing. What am I doing wrong?

I have also included partial code (third snippet), for the form and modal.

If anyone has a working example using Foundation, data-abide="ajax" and reveal-modal, where the form is submitted, an AJAX call is made to a PHP script to insert data into the DB, and on success the modal window opens, please provide a sample.

SNIPPET 1 - works

<script type="text/javascript">
$(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      console.log('Not Submitted');
    })
    .on('valid.fndtn.abide', function() {
      $("#pledge_form :input").prop('readonly', true);
      $("#pledge_btn").attr("disabled", true);
      $("#terms").attr("disabled", true);
      $("#sweeps").attr("disabled", true);
      console.log('Submitted: ', data);
      $('#myModal').foundation('reveal', 'open');
    });
});

SNIPPET 2 - Does NOT work

 <script type="text/javascript">
  $(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
        var lname = $("#lName").val();

        var dataString = 'lname=' + lname;

      alert("Form submitted");
      $.ajax({
        url     : create_pledge.php,
        type    : $(this).attr('method'),
        data    : dataString,
        success : function( data ) {
          $("#pledge_form :input").prop('readonly', true);
          $("#pledge_btn").attr("disabled", true);
          $("#terms").attr("disabled", true);
          $("#sweeps").attr("disabled", true);
          console.log('Submitted: ', data);
          $('#myModal').foundation('reveal', 'open');
        },
        error   : function( data, xhr, err ) {
          console.log('Oops: ', data, xhr , err);
        }
      });
      return false;
    });
  });
</script>

PARTIAL FORM and MODAL Code

    <div class="row pledge-row">
  <form data-abide="ajax" id="pledge_form" method="post" name="pledge_form">
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">First Name*</label>
        <input id="fName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">First Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">Last Name*</label>
        <input id="lName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">Last Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
          <label class="pledge-label">Email*</label>
          <input id="email" type="email"  required style="margin:0 0 5px 0 !important;"/>             
          <small class="error">.edu email address is required</small>
          <span id="email-result"></span>
          <div class="valid-email">(must be a properly formatted .edu email)</div>

      </div>
    </div>

    <!-- CODE REMOVED FOR THIS POST -->
  </form>
</div>

    <!-- Modal -->
    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <h2 id="modalTitle">Thanks for pledging.</h2>
        <p>please check your email for our confirmation/validation email.</p>
        <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>

Answer 1

I had the same problem too with fancybox and ajax check before submit.

This is my solution that works for sure

<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....

</form>

<script type="text/javascript" src="..../js/foundation.min.js"></script>

<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>

<script type="text/javascript">

$('#my_form')
    .on('invalid.fndtn.abide', function() {
        console.log('NOT Submitted');
    })
    .on('valid.fndtn.abide', function() {
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxRequest = $.ajax({
            type: 'GET',
            url: "....",
            data: {xxx: yyy},
            cache: false,
            dataType: 'json',
        });

        ....

        ajaxRequest.done(function() {
            if (ok) {
                $('#check_this_field_with_ajax').parent().removeClass('error');
                $('#my_form').attr({'submit_this_form': 'yes'});
                $(document).foundation('abide', 'reflow');
                $('#my_form').trigger('submit.fndtn.abide');
            }
        });
    }

</script>

Now go to in foundation.abide.js, search line "validate : function (els, e, is_ajax) {" and add:

if (
    is_ajax &&
    form.attr('submit_this_form') === 'yes'
    ) {
    return true;
  }

before

if (is_ajax) {
    return false;
  }

Answer 2

Found the answer. I needed to have the ajax request in the submit, not the valid event.

So this works:

        $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      // alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
      // alert("Form submitted");
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxObj = $.ajax({
          url   : 'create_pledge.php',
          type    : $(this).attr('method'),
          data    : $(this).serialize(),
          success : function( ) {
            $("#pledge_form :input").prop('readonly', true);
            $("#pledge_btn").attr("disabled", true);
            $("#terms").attr("disabled", true);
            $("#sweeps").attr("disabled", true);
            console.log('Submitted');
            $('#myModal').foundation('reveal', 'open');
          },
          error   : function( xhr, err ) {
            console.log('Oops: ', xhr , err);
          },
          complete: function(){
              console.log('COMPLETE');
          }
      });
    });
  });