Abide Foundation - triggering valid.fndtn.abide

Question

I'm using Abide to run validation on a form, which is working fine. However I'm trouble performing an action if the form is valid or invalid.

HTML:

<form role="form" id="form_search_extended" name="form_search_extended" data-abide="ajax" novalidate>

    <input name="postalCode" type="text" value="{{$data['postalCode']['value']}}" placeholder="ZIP/Postal Code" required maxlength="10">

    <button type="submit" value="Submit">Submit</button>

</form>

Javascript:

    $('#form_search_extended')
      .on('invalid.fndtn.abide', function () {
        callFunctionOnValid();
        console.log('invalid!');
      })
      .on('valid.fndtn.abide', function () {
        console.log('valid!');
      });

var form = document.getElementById('form_search_extended');
form.onsubmit = function(e) {

    e.preventDefault();

    console.log('form submitted');
};

The code inside the valid or invalid listeners weren't being run.

I don't understand why this isn't working. Is the event listener for valid.fndtn.abide not being fired? Abide is working because the validation for the fields is showing up.

Thanks.

Lea Fox · Answer 1 · 2017-04-26T06:42:56.093

You need to initialize the script.

Add

  <script>
    $(document).foundation();
  </script>

before the closing body tag

$('#form_search_extended')
  .on('valid.fndtn.abide', function(e, el) {
    callFunctionOnValid();
    console.log('invalid!');
  })
  .on('invalid.fndtn.abide', function(e, el) {
    console.log(e.target, 'valid!');
  })
  .on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submitted");
  });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
 
</head>

<body>

  <form data-abide novalidate role="form" id="form_search_extended" name="form_search_extended">
    <label>Number required
    <input name="postalCode" type="text"  placeholder="ZIP/Postal Code" required pattern="number" maxlength="10">
    </label>
    <small class="error">You need a number.</small>
    <button type="submit" value="Submit">Submit</button>
  </form>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/plugins/foundation.abide.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

</html>

score 1 · Answer 2 · answered Dec 01 '19 at 21:24

For anyone else having this problem, Lea Fox's answer wasn't working for me as I had already initialized Foundation. What did work was creating a new Abide instance right before the form JS code. In this case:

   const $form = $('#form_search_extended');

   // Create new Abide instance
   new Foundation.Abide($form);

   $form
      .on('valid.fndtn.abide', function(e, el) {
        callFunctionOnValid();
        console.log('invalid!');
      })
      .on('invalid.fndtn.abide', function(e, el) {
        console.log(e.target, 'valid!');
      })
      .on("submit", function(ev) {
        ev.preventDefault();
        console.log("Submitted");
      });

Now the valid.fndtn.abide and invalid.fndtn.abide triggers are being called. I am not sure why this is required, it may have something to do with ES6 modules.

Abide Foundation - triggering valid.fndtn.abide

2 Answers2