Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Abide in Foundation CSS es una biblioteca de validación de formularios que se utiliza para validar el formulario con validadores personalizados. Foundation CSS Abide Error State se usa para especificar que la entrada de un campo en particular en un formulario está en un estado de error. Es útil cuando el campo es obligatorio o cuando el usuario ingresa detalles de formulario no válidos.
Foundation CSS Abide Clases de estado de error :
- llamada de alerta : se utiliza para mostrar un cuadro de advertencia de color rojo si el campo está en un estado de error.
- is-invalid-input : compruebe si la entrada es válida de acuerdo con las etiquetas de entrada utilizadas.
- form-error is-visible : Para mostrar que el campo es obligatorio.
Atributos del estado de error de Foundation CSS Abide:
- data-abide : este atributo se usa para definir que el formulario se valida usando abide.
- data-abide-error : este atributo se utiliza para especificar que el elemento se encuentra en un estado de error.
- type = ”hidden” : Este tipo de atributo se utiliza para ocultar el elemento.
- type = ”reset” : este tipo de atributo se utiliza para restablecer/vaciar el formulario.
- disabled : este tipo de atributo se utiliza para deshabilitar cualquier entrada del elemento.
Sintaxis:
<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>
Ejemplo 1: este ejemplo ilustra el estado inicial de cumplimiento en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Initial State</title>
<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>
</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>
Salida:
Fundación CSS Respetar el estado de error
Ejemplo 2 : Este ejemplo ilustra el estado de error de permanencia en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Error State</title>
<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>
</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>
Producción:
Fundación CSS Respetar el estado de error
Ejemplo 3: Este ejemplo ilustra el estado de error de cumplimiento con la etiqueta de entrada deshabilitada en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Error State</title>
<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>
</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>
Producción:
Fundación CSS Respetar el estado de error
Referencia: https://get.foundation/sites/docs/abide.html#error-state