Text input boxes keep changing position when error message appears-CodePudding

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 >
      <div >
       <label for="FirstName">First name</label>
         <input  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  data-valmsg-for="FirstName" data- 
                   valmsg-replace="true"></span>
                </div>

   <div >
     <label for="LastName">Last name</label>
       <input  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  data-valmsg-for="LastName" data- 
                  valmsg-replace="true">
                    <span id="LastName-error" >Last name is required.</span> 
                </span>
       </div>
   </div>

CodePudding user response：

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.

CodePudding user response：

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 >
      <div >
       <label for="FirstName">First name</label>
         <input  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  data-valmsg-for="FirstName" data- 
                   valmsg-replace="true"></span>
                </div>

   <div >
     <label for="LastName">Last name</label>
       <input  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  data-valmsg-for="LastName" data- 
                  valmsg-replace="true">
                    <span id="LastName-error" >Last name is required.</span> 
                </span>
       </div>
   </div>