Primer CSS Form Group Validation
Last Updated :
19 Apr, 2022
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
In this article, we will discuss the Primer CSS Form Group Validation. Form Groups have success, error, and warning validation messages to convey to the user.
Primer CSS Form Group Validation Classes:
- successed: This class is added to the form-group class when the input is valid.
- note: This class is used to show the message note.
- success: This class is added with the .note class and it is used to show the success message in green color.
- errored: This class is added to the .form-group class when the input is not valid.
- error: This class is added with the .note class and it is used to show the error message in red color.
- warn: This class is added to the .form-group class when the input should show a warning message.
- warning: This class is added with the .note class and it is used to show the warning message in yellow color.
Syntax:
<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>
Example 1: Below example demonstrates the use of Primer CSS Form Group Validation using a success message.
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>
Output:
Primer CSS Form Group Validation
Example 2: Below example demonstrates the use of Primer CSS Form Group Validation using an error message.
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>
Output:
Primer CSS Form Group Validation
Example 3: Below example demonstrates the use of Primer CSS Form Group Validation using a warning message.
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>
Output:
Primer CSS Form Group Validation
Reference: https://primer.style/css/components/forms#form-group-validation
Similar Reads
Primer CSS Forms Radio Group Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS Form Groups Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS Selects Forms Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Form Validation using jQuery Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T
5 min read
Semantic-UI Form Grouped Fields Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A form is the section of a document that
3 min read
Spectre Forms Form validation styles Spectre Forms validation styles class is used to style the form. To use form validation styles, you can either add is-success or is-error class to the controls. Add has-success or has-error class to parent elements. Use the form-input-hint class to provide form validation success and error messages.
2 min read
Primer CSS Inputs Forms Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Kitchen Sink Forms Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Pure CSS Form Grouped Inputs Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w
2 min read
Bootstrap 5 Validation Server side Bootstrap 5 Validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript. If you are using server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid and add .invalid-feedback & .va
3 min read