Abide

JavaScript

Abide 是表單驗證函式庫，可使用自訂驗證器來擴充 HTML5 驗證 API。

Abide 示範

下列輸入類型會建立文字欄位：text、date、datetime、datetime-local、email、month、number、password、search、tel、time、url 和 week。請注意，novalidate 屬性用於停用可能與 Abide 衝突的任何瀏覽器驗證。

觀看影片中的這段內容

<form data-abide novalidate>
  <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>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell small-12">
        <label>Number Required
          <input type="text" placeholder="1234" aria-describedby="example1Hint1" aria-errormessage="example1Error1" required pattern="number">
          <span class="form-error">
            Yo, you had better fill this out, it's required.
          </span>
        </label>
      <p class="help-text" id="example1Hint1">Here's how you use this input field!</p>
      </div>
      <div class="cell small-12">
        <label>Password Required
          <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="example1Hint2" aria-errormessage="example1Error2" required >
          <span class="form-error">
            I'm required!
          </span>
        </label>
        <p class="help-text" id="example1Hint2">Enter a password please.</p>
      </div>
      <div class="cell small-12">
        <label>Re-enter Password
          <input type="password" placeholder="yeti4preZ" aria-describedby="example1Hint3" aria-errormessage="example1Error3" required pattern="alpha_numeric" data-equalto="password">
          <span class="form-error">
            Hey, passwords are supposed to match!
          </span>
        </label>
        <p class="help-text" id="example1Hint3">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
      </div>
    </div>
  </div>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell large-6">
        <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
          <input type="text" placeholder="https://foundation.dev.org.tw" pattern="url">
        </label>
      </div>
      <div class="cell large-6">
        <label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
          <input type="text" placeholder="https://foundation.dev.org.tw or get.foundation" pattern="website">
        </label>
      </div>
    </div>
  </div>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell large-6">
        <label>European Cars, Choose One, it can't be the blank option.
          <select id="select" required>
            <option value=""></option>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
        </label>
      </div>
      <fieldset class="cell large-6">
        <legend>Check these out</legend>
        <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
        <input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
        <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
      </fieldset>
    </div>
  </div>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <fieldset class="cell large-6">
        <legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
        <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
        <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
        <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
      </fieldset>
      <fieldset class="cell large-6">
        <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
        <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
        <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
        <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
      </fieldset>
    </div>
  </div>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <fieldset class="cell large-6">
        <button class="button" type="submit" value="Submit">Submit</button>
      </fieldset>
      <fieldset class="cell large-6">
        <button class="button" type="reset" value="Reset">Reset</button>
      </fieldset>
    </div>
  </div>
</form>

所需的數字喂，你最好填寫此欄位，這是必要的。

以下是使用此輸入欄位的方式！

所需的密碼我是必要的！

請輸入密碼。

重新輸入密碼嘿，密碼應該要相符！

此欄位使用 `data-equalto="password"` 屬性，導致它與上方密碼欄位相符。

URL 模式，非必要，但如果與有效 URL 的正規表示法不符，則會擲回錯誤。

網站模式，非必要，但如果與有效 URL 或網域的正規表示法不符，則會擲回錯誤。

歐洲汽車，選擇一個，不能是空白選項。

查看這些核取方塊 1 核取方塊 2 核取方塊 3

選擇你最喜歡的 - 非必要，你可以將此欄位留空。紅色藍色黃色

選擇你最喜歡的，這是必要的，所以你必須選擇一個。紅色藍色黃色

表單中有一些錯誤。

必要事項喂，你最好填寫此欄位。必要事項

表單錯誤

Abide 會自動偵測輸入的表單錯誤，偵測方式是根據其類別（預設為 .form-error，請參閱 formErrorSelector 選項），當它們是輸入的同層元素或在同一個父元素內時。

當表單錯誤無法放置在欄位旁邊時，例如在輸入群組中，可以使用 [data-form-error-for] 屬性來宣告關聯性。

<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>

您可以使用 [data-form-error-on] 屬性指定驗證器特定的錯誤訊息，例如

data-form-error-on="required"
data-form-error-on="pattern"
data-form-error-on="equalTo"
data-form-error-on="your_custom_validator"

<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>

必填的單選按鈕和核取方塊

如果您將 required 新增到單選按鈕或核取方塊輸入，則整個群組都會被視為必填。這表示必須至少勾選其中一項輸入。核取方塊輸入支援額外的屬性 data-min-required，讓您可以指定群組中必須勾選多少個核取方塊（預設為一個）。

<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>

事件監聽器

在 Foundation 初始化後設定事件監聽器（特別是針對 formvalid/forminvalid）。透過文件選擇器串接會比較容易。

valid.zf.abide 和 invalid.zf.abide 是欄位層級的事件，在 validateInput 函式中觸發
- ev.target 是 DOM 欄位元素，
- elem 是欄位元素的 jQuery 選擇器
formvalid.zf.abide 和 forminvalid.zf.abide 是表單事件，在 validateForm 函式中觸發
- ev.target 是 DOM 表單元素，
- frm 是表單元素的 jQuery 選擇器

$(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、alpha_numeric、card、color cvv、date、dateISO、datetime、day_month_year、domain、email、integer、month_day_year、number、time、url

除了這些標準樣式之外，我們還有一個 website 樣式，它基本上是 domain 和 url 樣式的組合，我們建議您使用這個 website 樣式來驗證網站。

它們由正規表示式定義，如下所示。請注意，與文字相關的模式（例如 alpha 和 alpha_numeric）不會考慮其他語言的特殊字元。您需要自行將這些特殊字元新增至正規表示式。例如，對於德語，您需要新增

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

然後，您需要根據下一節說明自訂內建模式。否則，如果在使用 pattern="alpha" 或 pattern="alpha_numeric" 驗證的文字欄位中輸入特殊字元，Abide 會產生錯誤。

以下是內建模式的定義

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>

jQuery 衝突

建立類型為 submit 的按鈕時，請務必避免使用 name="submit"，否則您的表單將無法提交。這是因為 jQuery 限制（請參閱其他說明）。

無障礙

Abide 預設會將一些無障礙屬性新增至您的表單元素。強烈建議保持此選項處於啟用狀態，因為它可以改善身心障礙者使用表單的便利性。深入了解 Foundation 中的無障礙。

不過，如果您認為 Abide 新增的屬性不正確，您可以將 a11yAttributes（或 [data-a11y-attributes]）設定為 false 以停用它。

Sass 參考

變數

您可以使用專案的設定檔中的這些 Sass 變數，自訂此組件的預設樣式。

名稱	類型	預設值	說明
`$abide-inputs`	布林值	`true`	設定是否應將錯誤樣式新增至輸入元件。
`$abide-labels`	布林值	`true`	設定是否應將錯誤樣式新增至標籤。
`$input-background-invalid`	顏色	`get-color(alert)`	用於無效文字輸入元件的背景顏色。
`$form-label-color-invalid`	顏色	`get-color(alert)`	用於無效輸入元件標籤的顏色。
`$input-error-color`	顏色	`get-color(alert)`	表單錯誤文字的預設字型顏色。
`$input-error-font-size`	數字	`rem-calc(12)`	表單錯誤文字的預設字體大小。
`$input-error-font-weight`	關鍵字	`$global-weight-bold`	表單錯誤文字的預設字體粗細。

Mixins

我們使用這些 mixin 來建構此元件的最終 CSS 輸出。您可以自行使用 mixin，從我們的元件中建構您自己的類別結構。

form-input-error

@include form-input-error($background, $background-lighten);

設定輸入欄位的背景和邊框，以顯示錯誤狀態。

參數	類型	預設值	說明
`$background`	顏色	`$alert-color`	用於背景和邊框的顏色。
`$background-lighten`	數字	`10%`	背景顏色的亮度等級。

form-error

@include form-error;

使用設定檔中的值，將錯誤樣式新增至表單元素。

JavaScript 參考

初始化

您的 JavaScript 中必須包含下列檔案才能使用此外掛程式

foundation.core.js
foundation.abide.js

Foundation.Abide

建立 Abide 的新執行個體。

var elem = new Foundation.Abide(element, options);

觸發下列事件： Abide#event:init

名稱	類型	說明
`element`	物件	要新增觸發器的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛程式選項

使用這些選項自訂 Abide 的執行個體。外掛程式選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或傳遞至外掛程式建構函式的物件。深入了解 JavaScript 外掛程式的初始化方式。

名稱	類型	預設值	說明
`data-validate-on`	`字串`	`fieldChange`	驗證輸入的預設事件。核取方塊和單選按鈕會立即驗證。移除或變更此值以進行手動驗證。
`data-label-error-class`	`字串`	`is-invalid-label`	驗證失敗時套用至輸入標籤的類別。
`data-input-error-class`	`字串`	`is-invalid-input`	驗證失敗時套用至輸入的類別。
`data-form-error-selector`	`字串`	`.form-error`	用於鎖定表單錯誤以顯示/隱藏的類別選擇器。
`data-form-error-class`	`字串`	`is-visible`	驗證失敗時新增至表單錯誤的類別。
`data-a11y-attributes`	`布林值`	`true`	如果為 true，則自動插入（如果可能）：- 欄位上的 `[aria-describedby]` - 表單錯誤上的 `[role=alert]` 和表單錯誤標籤上的 `[for]` - 全域錯誤 `[data-abide-error]` 上的 `[aria-live]`（請參閱選項 `a11yErrorLevel`）。
`data-a11y-error-level`	`字串`	`assertive`	要套用至全域錯誤 `[data-abide-error]` 上的 `[aria-live]` 屬性值。選項包括：'assertive'、'polite' 和 'off'/null
`data-live-validate`	`布林值`	`false`	設為 true 以在任何值變更時驗證文字輸入。
`data-validate-on-blur`	`布林值`	`false`	設為 true 以在失去焦點時驗證輸入。
`data-validators`			要使用的選用驗證函式。`equalTo` 是唯一預設包含的函式。函式應僅傳回輸入是否有效的布林值。函式會收到以下參數：el：要驗證的 jQuery 元素。

事件

這些事件會從附加 Abide 外掛程式的任何元素觸發。

名稱	說明
`invalid.zf.abide`	在輸入完成驗證檢查時觸發。事件觸發器為 `valid.zf.abide` 或 `invalid.zf.abide`。觸發器包括輸入的 DOM 元素。
`forminvalid.zf.abide`	在表單完成驗證時觸發。事件觸發器為 `formvalid.zf.abide` 或 `forminvalid.zf.abide`。觸發器包括表單的元素。
`formreset.zf.abide`	在表單重設時觸發。

方法

enableValidation

$('#element').foundation('enableValidation');

啟用整個驗證

disableValidation

$('#element').foundation('disableValidation');

停用整個驗證

requiredCheck

$('#element').foundation('requiredCheck', element);

檢查表單元素是否具有 required 屬性，以及是否已勾選

名稱	類型	說明
`element`	物件	要檢查 required 屬性的 jQuery 物件

findFormError

$('#element').foundation('findFormError', $el, failedValidators);

取得

根據 $el，第一個對應於 formErrorSelector 的元素（按此順序）
1. 元素的直接同層元素。
2. 元素的父元素的子元素。
設定有屬性 [data-form-error-for] 的元素（設定為元素的 id）。

這允許每個輸入有多個表單錯誤，但如果沒有發現，則不會顯示任何表單錯誤。

名稱	類型	說明
`$el`	物件	用作尋找表單錯誤選擇器的參考的 jQuery 物件。
`failedValidators`	Array.	失敗驗證器的清單。

findLabel

$('#element').foundation('findLabel', $el);

按此順序取得第一個元素：2. 具有屬性 [for="someInputId"] 的 3. .closest()

名稱	類型	說明
`$el`	物件	要檢查 required 屬性的 jQuery 物件

findRadioLabels

$('#element').foundation('findRadioLabels', $el);

按此順序取得與一組 radio 元素關聯的標籤組 2. 具有屬性 [for="someInputId"] 的 3. .closest()

名稱	類型	說明
`$el`	物件	要檢查 required 屬性的 jQuery 物件

findCheckboxLabels

$('#element').foundation('findCheckboxLabels', $el);

按此順序取得與一組 checkbox 元素關聯的標籤組 2. 具有屬性 [for="someInputId"] 的 3. .closest()

名稱	類型	說明
`$el`	物件	要檢查 required 屬性的 jQuery 物件

addErrorClasses

$('#element').foundation('addErrorClasses', $el, failedValidators);

將 Abide 設定指定的 CSS 錯誤類別新增至標籤、輸入和表單

名稱	類型	說明
`$el`	物件	要新增類別的 jQuery 物件
`failedValidators`	Array.	失敗驗證器的清單。

addA11yAttributes

$('#element').foundation('addA11yAttributes', $el);

將 [for] 和 [role=alert] 屬性新增至所有目標為 $el 的表單錯誤，並將 [aria-describedby] 屬性新增至 $el 以指向第一個表單錯誤。

名稱	類型	說明
`$el`	物件	jQuery 物件

addGlobalErrorA11yAttributes

$('#element').foundation('addGlobalErrorA11yAttributes', $el);

將 [aria-live] 屬性新增至指定的全域表單錯誤 $el。

名稱	類型	說明
`$el`	物件	要新增屬性的 jQuery 物件

removeRadioErrorClasses

$('#element').foundation('removeRadioErrorClasses', groupName);

從整個單選按鈕群組中移除 CSS 錯誤類別等

名稱	類型	說明
`groupName`	字串	指定單選按鈕群組名稱的字串

removeCheckboxErrorClasses

$('#element').foundation('removeCheckboxErrorClasses', groupName);

從整個核取方塊群組中移除 CSS 錯誤類別等

名稱	類型	說明
`groupName`	字串	指定核取方塊群組名稱的字串

removeErrorClasses

$('#element').foundation('removeErrorClasses', $el);

從標籤、輸入和表單中移除 Abide 設定指定的 CSS 錯誤類別

名稱	類型	說明
`$el`	物件	要移除類別的 jQuery 物件

validateInput

$('#element').foundation('validateInput', element);

瀏覽表單以尋找輸入，並根據其類型驗證它們。忽略設定了 data-abide-ignore、type="hidden" 或 disabled 屬性的輸入

觸發這些事件： Abide#event:invalid Abide#event:valid

名稱	類型	說明
`element`	物件	要驗證的 jQuery 物件，應為 HTML 輸入

validateForm

$('#element').foundation('validateForm');

遍歷表單，如果有任何無效輸入，它將顯示表單錯誤元素

觸發這些事件： Abide#event:formvalid Abide#event:forminvalid

validateText

$('#element').foundation('validateText', $el, pattern);

根據屬性中指定的模式，判斷文字輸入是否有效。如果找不到相符的模式，則傳回 true。

名稱	類型	說明
`$el`	物件	要驗證的 jQuery 物件，應為文字輸入 HTML 元素
`pattern`	字串	Abide.options.patterns 中其中一個 RegEx 模式的字串值

validateRadio

$('#element').foundation('validateRadio', groupName);

根據是否需要且已選取，判斷無線電輸入是否有效。儘管此函式針對單一 <input>，但它會透過檢查其群組中所有無線按鈕的 required 和 checked 屬性來驗證。

名稱	類型	說明
`groupName`	字串	指定單選按鈕群組名稱的字串

validateCheckbox

$('#element').foundation('validateCheckbox', groupName);

根據是否需要且已勾選，判斷核取方塊輸入是否有效。儘管此函式針對單一 <input>，但它會透過檢查其群組中所有核取方塊的 required 和 checked 屬性來驗證。

名稱	類型	說明
`groupName`	字串	指定核取方塊群組名稱的字串

matchValidation

$('#element').foundation('matchValidation', $el, validators, required);

判斷選取的輸入是否通過自訂驗證函式。如果使用空白分隔的清單傳遞給元素，則可以使用多個驗證，例如 data-validator="foo bar baz"。

名稱	類型	說明
`$el`	物件	jQuery 輸入元素。
`validators`	字串	與 Abide.options.validators 物件中函式相符的函式名稱字串。
`required`	布林值	不言自明？

resetForm

$('#element').foundation('resetForm');

重設表單輸入和樣式

觸發這些事件： Abide#event:formreset

_destroy

$('#element').foundation('_destroy');

銷毀 Abide 的執行個體。從元素中移除錯誤樣式和類別，而不重設其值。