Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, discutiremos la validación del grupo de formularios CSS de Primer . Los grupos de formularios tienen mensajes de validación de éxito, error y advertencia para transmitir al usuario.
Clases de validación de grupos de formularios CSS básicos:
- éxito: esta clase se agrega a la clase de grupo de formularios cuando la entrada es válida.
- nota: Esta clase se utiliza para mostrar la nota del mensaje.
- éxito: Esta clase se agrega con la clase .note y se usa para mostrar el mensaje de éxito en color verde.
- con error: esta clase se agrega a la clase .form-group cuando la entrada no es válida.
- error: Esta clase se agrega con la clase .note y se usa para mostrar el mensaje de error en color rojo.
- advertir: esta clase se agrega a la clase .form-group cuando la entrada debe mostrar un mensaje de advertencia.
- advertencia: esta clase se agrega con la clase .note y se usa para mostrar el mensaje de advertencia en color amarillo.
Sintaxis:
<form>
<div class="form-group successed">
<div class="form-group-header">
<label for="xyz">...</label>
</div>
<div class="form-group-body">
<input class="form-control"
type="text" value="..." id="xyz"
aria-describedby="abc" />
</div>
<p class="note success" id="abc">
...
</p>
</div>
</form>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la validación de grupos de formularios de Primer CSS mediante un mensaje de éxito .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Form Group Validation</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Form Group Validation</h3> <form> <div class="form-group successed"> <div class="form-group-header"> <label for="GfG-Coupon-Code-input"> GfG-Coupon-Code </label> </div> <div class="form-group-body"> <input class="form-control" type="text" value="DEALGFG" id="GfG-Coupon-Code-input" aria-describedby="GfG-Coupon-Code-input-validation" /> </div> <p class="note success" id="GfG-Coupon-Code-input-validation"> Coupon code Applied </p> </div> </form> </div> </body> </html>
Producción:
Validación del grupo de formularios CSS de Primer
Ejemplo 2: El siguiente ejemplo demuestra el uso de la validación de grupos de formularios de Primer CSS mediante un mensaje de error .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Form Group Validation</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Form Group Validation</h3> <form> <div class="form-group errored"> <div class="form-group-header"> <label for="GfG-Coupon-Code-input"> GfG Coupon Code </label> </div> <div class="form-group-body"> <input class="form-control" type="text" value="DEAGFGA" id="GfG-Coupon-Code-input" aria-describedby="GfG-Coupon-Code-input-validation" /> </div> <p class="note error" id="GfG-Coupon-Code-input-validation"> Invalid Coupon code </p> </div> </form> </div> </body> </html>
Producción:
Validación del grupo de formularios CSS de Primer
Ejemplo 3: El siguiente ejemplo demuestra el uso de la validación de grupos de formularios de Primer CSS mediante un mensaje de advertencia .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Form Group Validation</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Form Group Validation</h3> <form> <div class="form-group warn"> <div class="form-group-header"> <label for="GfG-Coupon-Code-input"> GfG Coupon Code </label> </div> <div class="form-group-body"> <input class="form-control" type="text" value="DEAGFGA" id="GfG-Coupon-Code-input" aria-describedby="GfG-Coupon-Code-input-validation" /> </div> <p class="note warning" id="GfG-Coupon-Code-input-validation"> Please add a valid 4 character coupon code </p> </div> </form> </div> </body> </html>
Producción:
Validación del grupo de formularios CSS de Primer
Referencia: https://primer.style/css/components/forms#form-group-validation
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA