Abide

<form data-abide novalidate>
  <div data-abide-error class="sr-only">
    There are some errors in your form.
  </div>

  <div>
    Amount
    <div class="input-group">
      <span class="input-group-label">$</span>
      <input class="input-group-field" id="example3Input" type="number" required pattern="number"/>
    </div>
    <label class="form-error" data-form-error-for="example3Input">Amount is required.</label>
  </div>

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

<form data-abide novalidate>
  <label>Email Required
    <input type="text" required pattern="email">
    <span class="form-error" data-form-error-on="required">
      Yo, you had better fill this out, it's required.
    </span>
    <span class="form-error" data-form-error-on="pattern">
      Invalid Email
    </span>
  </label>
  <button class="button" type="submit" value="Submit">Submit</button>
</form>

<form data-abide>
  <!-- Add "display: none" right away -->
  <div data-abide-error class="alert callout" aria-live="assertive" style="display: none;">
    <p><i class="fi-alert"></i> There are some errors in your form.</p>
  </div>
  <label>
    Name
    <input id="example4Input" aria-describedby="example4Error" type="text" required>
    <span id="example4Error" class="form-error">This field is required.</span>
  </label>
</form>

<form data-abide>
  <!-- Add role="alert" -->
  <!-- Add "display: block" -->
  <div data-abide-error class="alert callout" aria-live="assertive" role="alert" style="display: block;">
    <p><i class="fi-alert"></i> There are some errors in your form.</p>
  </div>
  <!-- Add "is-invalid-label" -->
  <label class="is-invalid-label">
    Name
    <!-- Add "is-invalid-input" -->
    <!-- Add aria-invalid="true" -->
    <input id="example4Input" aria-describedby="example4Error" type="text" required
      class="is-invalid-input" aria-invalid="true">
    <!-- Add "is-visible" -->
    <span id="example4Error" class="form-error is-visible">This field is required.</span>
  </label>
</form>

<form data-abide>
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <label>Nothing Required!
        <input type="text" placeholder="Use me, or don't" aria-describedby="example5Hint1" data-abide-ignore>
      </label>
      <p class="help-text" id="example5Hint1">This input is ignored by Abide using `data-abide-ignore`</p>
    </div>
    <div class="cell small-12">
      <label>Disabled!
        <input type="text" placeholder="Disabled input" aria-describedby="example5Hint2" disabled>
      </label>
      <p class="help-text" id="example5Hint2">This input is ignored by Abide using `disabled`</p>
    </div>
    <div class="cell small-12">
      <label>Hidden!
        <input type="hidden" placeholder="Hidden input" aria-describedby="example5Hint3" >
      </label>
      <p class="help-text" id="example5Hint3">This input is ignored by Abide using `type="hidden"`</p>
    </div>
  </div>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <fieldset class="cell small-12">
        <button class="button" type="submit" value="Submit">Submit</button>
      </fieldset>
      <fieldset class="cell small-12">
        <button class="button" type="reset" value="Reset">Reset</button>
      </fieldset>
    </div>
  </div>
</form>

<form data-abide novalidate>
  <div class="grid-x grid-margin-x align-bottom">
    <div class="cell medium-6 large-4">
      <fieldset>
        <legend>Radio Group</legend>
        <input type="radio" name="exampleRadio" id="exampleRadioA" value="A">
        <label for="exampleRadioA">A</label>
        <input required type="radio" name="exampleRadio" id="exampleRadioB" value="B">
        <label for="exampleRadioB">B</label>
        <input type="radio" name="exampleRadio" id="exampleRadioC" value="C">
        <label for="exampleRadioC">C</label>
      </fieldset>
    </div>
    <div class="cell medium-6 large-4">
      <fieldset>
        <legend>Checkbox Group</legend>
        <input data-min-required="2" type="checkbox" name="exampleCheckbox" id="exampleCheckboxA" value="A">
        <label for="exampleCheckboxA">A</label>
        <input required type="checkbox" name="exampleCheckbox" id="exampleCheckboxB" value="B">
        <label for="exampleCheckboxB">B</label>
        <input type="checkbox" name="exampleCheckbox" id="exampleCheckboxC" value="C">
        <label for="exampleCheckboxC">C</label>
      </fieldset>
    </div>
    <div class="cell large-4">
      <button class="button" type="submit">Submit</button>
    </div>
  </div>
</form>

$(document)
  // field element is invalid
  .on("invalid.zf.abide", function(ev,elem) {
    console.log("Field id "+ev.target.id+" is invalid");
  })
  // field element is valid
  .on("valid.zf.abide", function(ev,elem) {
    console.log("Field name "+elem.attr('name')+" is valid");
  })
  // form validation failed
  .on("forminvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+ev.target.id+" is invalid");
  })
  // form validation passed, form will submit if submit event not returned false
  .on("formvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+frm.attr('id')+" is valid");
    // ajax post form
  })
  // to prevent form from submitting upon successful validation
  .on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submit for form id "+ev.target.id+" intercepted");
  });
// You can bind field or form event selectively
$("#foo").on("invalid.zf.abide", function(ev,el) {
  alert("Input field foo is invalid");
});
$("#bar").on("formvalid.zf.abide", function(ev,frm) {
  alert("Form is valid, finally!");
  // do something perhaps
});

alpha : /^[a-zäöüßA-ZÄÖÜ]+$/,
alpha_numeric : /^[a-zäöüßA-ZÄÖÜ0-9]+$/,

alpha : /^[a-zA-Z]+$/,
alpha_numeric : /^[a-zA-Z0-9]+$/,
integer : /^[-+]?\d+$/,
number : /^[-+]?\d*(?:[\.\,]\d+)?$/,

// amex, visa, diners
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
cvv : /^([0-9]){3,4}$/,

// https://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,

// From CommonRegexJS (@talyssonoc)
// https://github.com/talyssonoc/CommonRegexJS/blob/e2901b9f57222bc14069dc8f0598d5f412555411/lib/commonregex.js#L76
// For more restrictive URL Regexs, see https://mathiasbynens.be/demo/url-regex.
url: /^((?:(https?|ftps?|file|ssh|sftp):\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\((?:[^\s()<>]+|(?:\([^\s()<>]+\)))*\))+(?:\((?:[^\s()<>]+|(?:\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))$/,

// abc.de
domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,

datetime : /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
// YYYY-MM-DD
date : /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
// HH:MM:SS
time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
// MM/DD/YYYY
month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
// DD/MM/YYYY
day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,

// #FFF or #FFFFFF
color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,

// Domain || URL
website: {
  test: (text) => {
    return Abide.defaults.patterns['domain'].test(text) || Abide.defaults.patterns['url'].test(text);
  }
}

function myCustomValidator(
  $el,      /* jQuery element to validate */
  required, /* is the element required according to the `[required]` attribute */
  parent    /* parent of the jQuery element `$el` */
) {
  if (!required) return true;
  var from = $('#'+$el.attr('data-greater-than')).val(),
      to = $el.val();
  return (parseInt(to) > parseInt(from));
};

// Set default options
Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
Foundation.Abide.defaults.validators['greater_than'] = myCustomValidator;

// Initialize Foundation
$(document).foundation();

<input id="phone" type="text" pattern="dashes_only" required >
<input id="min" type="number" required >
<input id="max" type="number" data-validator="greater_than" data-greater-than="min" required>