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>