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.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</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:
Example 2: This example shows the stand Beginning state in Foundation CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</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:
Reference: https://get.foundation/sites/docs/abide.html