Foundation CSS Abide Error State
Last Updated :
21 Sep, 2022
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Abide in Foundation CSS is a form validation library that is used to validate the form with custom validators. Foundation CSS Abide Error State is used to specify that a particular field’s input in a form is in an error state. It is helpful when the field is required or when the user inputs invalid form details.
Foundation CSS Abide Error State classes:
- alert callout: It is used to display a red-colored warning box if the field is in an error state.
- is-invalid-input: Check if the input is valid according to the input tags used.
- form-error is-visible: To show that the field is required.
Foundation CSS Abide Error State attributes:
- data-abide: This attribute is used to define that the form is validated using abide.
- data-abide-error: This attribute is used to specify that the element is in an error state.
- type = ”hidden”: This type of attribute is used to hide the element.
- type = ”reset”: This type of attribute is used to reset/empty the form.
- disabled: This type of attribute is used to disable any input of the element.
Syntax:
<form data-abide>
<div data-abide-error class="alert callout" ...> </div>
<input class="is-invalid-input" aria-invalid="true" ...>
<span class="form-error is-visible">...</span>
...
</form>
Example 1: This example illustrates the abide initial state in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Initial State</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<h1 style="color:green;"> GeeksforGeeks </h1>
<h3>Foundation CSS Abide Initial State</h3>
<form data-abide>
<div data-abide-error class="alert callout"
style="display:none;">
<p>There are some errors in the form.</p>
</div>
<label>
GFG Courses
<input id="gfg"
aria-describedby="gfg"
type="text"
required>
<span id="gfg"
class="form-error">This field is required.</span>
</label>
<button class="button"
type="submit">SUBMIT</button>
<button class="button"
type="reset">RESET</button>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Abide Error State
Example 2: This example illustrates the abide error state in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Error State</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks </h1>
<h3>Foundation CSS Abide Error State</h3>
<form data-abide>
<div data-abide-error
class="alert callout"
style="display: block;">
<p>There are some errors in the form.</p>
</div>
GFG Courses
<input id="gfg"
type="text"
required
class="is-invalid-input"
aria-invalid="true">
<span id="gfg"
class="form-error is-visible">
This field is required.
</span>
<button class="button"
type="submit">SUBMIT</button>
<button class="button"
type="reset">RESET</button>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Abide Error State
Example 3: This example illustrates the abide error state with the input tag disabled in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Error State</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<h1 style="color:green;"> GeeksforGeeks </h1>
<h3>Foundation CSS Abide Error State</h3>
<form data-abide>
<div data-abide-error class="alert callout"
style="display:block;">
<p>There are some errors in the form.</p>
</div>
GFG Courses (input field disabled)
<input id="gfg"
type="text"
required class="is-invalid-input"
aria-invalid="true"
disabled="true">
<span id="gfg" class="form-error is-visible">
This field is required.
</span>
<button class="button"
type="submit">SUBMIT</button>
<button class="button"
type="reset">RESET</button>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Abide Error State
Reference: https://get.foundation/sites/docs/abide.html#error-state
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...