Abide in Foundation CSS is a structure approval library that is utilized to approve the structure with custom validators.
Foundation CSS Abide Structure:
- Beginning State: Foundation CSS Stand Beginning State is utilized to determine that an info field in a structure is in the underlying/beginning state. It is valuable to make structures with various custom validator ascribes.
- Error State: Foundation CSS Stand Mistake State is utilized to determine that a specific field’s contribution to a structure is in a mistaken state. It is useful when the field is required or when the client inputs invalid structure subtleties.
- Overlooked Data sources: Disregarded input is one of the validators in withstanding that disregards, debilitates, or conceals the information fields.
- Required Radio and Checkbox: Required and information min-required are two credits utilized with checkboxes and radio to require every one of the fields and to separately require a base number of given fields.
Example 1: This example shows the withstand mistake state in Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</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" aria-live="assertive"
role="alert"
style="display:block;">
<p><i class="fi-alert"></i>
There are some errors in your form.</p>
</div>
<label class="is-invalid-label">
GFG
<input id="model4Input" aria-describedby="model4Error" type="text" required class="is-invalid-input" aria-invalid="true">
<span id="example4Error" class="form-error is-visible">
This field is required.
</span>
</label>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Abide Accessibility
Example 2: This example shows the stand Beginning state in Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Abide Beginning State</h3>
<form data-abide>
<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="model4Input"
aria-describedby="example4Error"
type="text"
required>
<span id="model4Error"
class="form-error">
This field is required.
</span>
</label>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Abide Accessibility
Reference: https://get.foundation/sites/docs/abide.html