Foundation Abide Multiple Events Firing

Foundation-Abide-Multiple-Events-Firing.markdown

Foundation Abide Multiple Events Firing

When you use Foundation's Abide form validation with the data-abide="ajax" attribute, every time you click submit, n+1 events are fired.

A Pen by Brian Hanna on CodePen.

License.

index.html

<script>$(document).foundation();</script>
<form name="videoForm" id="videoForm" data-abide="ajax" onsubmit="console.log(''); return false;">
                <textarea required data-abide-validator="videoIdLength" placeholder="Enter your video IDs here, one per line!" name="videoIDs" id="videoIDs"></textarea>
                <small class="error">Your data is invalid.</small>
                <button id="generate" class="button expand radius success" type="submit">Submit</button>
            </form>

script.js

$(document).foundation({
  abide: {
    validators: {
      videoIdLength: function(el, required, parent) {
        var vids = $(el).val().split('\n'),
            valid = [],
            invalid = [],
            ret = false;
        if (vids.length === 0) {
          ret = false;
          return ret;
        }
        $(vids).each(function(i,e) {
          var trim_val = e.trim();
          if (trim_val.length === 10 || trim_val.length === 21) {
            if (new RegExp(/\d_(\d|\w){8}/).test(trim_val) === true) {
              valid.push(trim_val);
            } else {
              invalid.push(trim_val);
            }
          } else {
            invalid.push(trim_val);
          }
        });
        if (invalid.length !== 0) {
          ret = false;
        } else {
          ret = true;
        }
        return ret;
      }
    }
  }
});


$('#generate').click(function() {
  $('#videoForm')
    .on('valid.fndtn.abide', function(e) {
    if (e.namespace === 'abide.fndtn') {
      console.log(e);
    }
  })
    .on('invalid.fndtn.abide', function(e) {
    if (e.namespace === 'abide.fndtn') {
      console.log(e);
    }
  })
    .clearQueue();
});

style.css

form {
    max-width: 500px;
}

#videoIDs {
    font-family: monospace;
    min-height: 300px;
}