'Text input boxes keep changing position when error message appears

The input boxes move up when the error message appears at the bottom . The error message is enclosed in a span tag When the input boxes are blank and the user tries to hit enter the error message should appear below the input box asking the user to enter the valid input , however when the input appears it moves the boxes up no longer aligning the two boxes when one is valid and the other invalid . I want it so that the error message occurs without moving changing the position of the input boxes

.inputs-account > label {
   font-size: 16px;
}

.name-inputs {
   display: flex;
   justify-content: flex-start;
   align-items: end;
}

.first-name-input {
   margin-right: 15px;
}

.inputs > .required {
   float: none;

}

.inputs > * {
   float: left;
   clear: both;
}

.inputs.reversed > * {
   float: none;
}

.inputs input[type="text"],
.inputs input[type="password"],
.inputs input[type="email"],
.inputs input[type="tel"],
.inputs select,
.inputs textarea {
   height: 45px;
   color: #12110C;
   border-radius: 3px;
   width: 100%;
   vertical-align: middle;
   border: 1px solid #D1DCE1;
   padding-left: 10px;
}
<div class="name-inputs inputs-account">
      <div class="inputs inputs-account first-name-input">
       <label for="FirstName">First name</label>
         <input class="key-change valid" type="text" data-val="true" data-val- 
             required="First name is required." id="FirstName" name="FirstName" 
               value="userName" aria-describedby="FirstName-error" aria-invalid="false">
                 <span class="field-validation-valid" data-valmsg-for="FirstName" data- 
                   valmsg-replace="true"></span>
                </div>

   <div class="inputs inputs-account">
     <label for="LastName">Last name</label>
       <input class="key-change input-validation-error" type="text" data-val="true" 
          data-val-required="Last name is required." id="LastName" name="LastName" 
           value="" aria-describedby="LastName-error" aria-invalid="true">
              <span class="field-validation-error" data-valmsg-for="LastName" data- 
                  valmsg-replace="true">
                    <span id="LastName-error" class="">Last name is required.</span> 
                </span>
       </div>
   </div>
htmlcssvalidationinput


Solution 1:[1]

If you try to use an error message under the fields then it will move the field up. As an alternative, you can use the bootstrap form-control class. It will help you to achieve the same thing you want to.

Leaving a link below of a codepen js form validation - {https://codepen.io/AbdullahSajjad/pen/LYGVRgK}

Hope this works.

Solution 2:[2]

set align-items: start; for .name-inputs class.

.inputs-account > label {
   font-size: 16px;
}

.name-inputs {
   display: flex;
   justify-content: flex-start;
   align-items: start;
}

.first-name-input {
   margin-right: 15px;
}

.inputs > .required {
   float: none;

}

.inputs > * {
   float: left;
   clear: both;
}

.inputs.reversed > * {
   float: none;
}

.inputs input[type="text"],
.inputs input[type="password"],
.inputs input[type="email"],
.inputs input[type="tel"],
.inputs select,
.inputs textarea {
   height: 45px;
   color: #12110C;
   border-radius: 3px;
   width: 100%;
   vertical-align: middle;
   border: 1px solid #D1DCE1;
   padding-left: 10px;
}
<div class="name-inputs inputs-account">
      <div class="inputs inputs-account first-name-input">
       <label for="FirstName">First name</label>
         <input class="key-change valid" type="text" data-val="true" data-val- 
             required="First name is required." id="FirstName" name="FirstName" 
               value="userName" aria-describedby="FirstName-error" aria-invalid="false">
                 <span class="field-validation-valid" data-valmsg-for="FirstName" data- 
                   valmsg-replace="true"></span>
                </div>

   <div class="inputs inputs-account">
     <label for="LastName">Last name</label>
       <input class="key-change input-validation-error" type="text" data-val="true" 
          data-val-required="Last name is required." id="LastName" name="LastName" 
           value="" aria-describedby="LastName-error" aria-invalid="true">
              <span class="field-validation-error" data-valmsg-for="LastName" data- 
                  valmsg-replace="true">
                    <span id="LastName-error" class="">Last name is required.</span> 
                </span>
       </div>
   </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jingi
Solution 2 Ahmad MRF

Related Questions