this may be sound easy but i am new with this. so i have this input box:

<input type="text" name="username" id="username" class="form-control" value="{{username}}">
<div class="error" id="nameErr"></div>

and i have the function where if the input box for username is empty,"username cannot be blank" will appear in that div class="error". it is already functioning but it is appearing at the right side of the input box, it should be below the input box. please help me fix this thank you :)

this may be sound easy but i am new with this. so i have this input box:

<input type="text" name="username" id="username" class="form-control" value="{{username}}">
<div class="error" id="nameErr"></div>

and i have the function where if the input box for username is empty,"username cannot be blank" will appear in that div class="error". it is already functioning but it is appearing at the right side of the input box, it should be below the input box. please help me fix this thank you :)

• javascript
• css
• node.js

• WIthout your CSS code and a minimal reproducible example, answers cannot be certain on which part of your code is buggy. You can insert a running snippet using Ctrl+M to help answerers. Also, do read: stackoverflow./help/minimal-reproducible-example to understand what a reproducible example means. – Richard Commented Feb 8, 2020 at 8:01
• Does my answer below (stackoverflow./a/60124992/9060223) solve your question? – Richard Commented Mar 28, 2020 at 13:38

5 Answers 5

The most straight forward way is to make the input have a display css property of block

input { display: block; }

Use whatever CSS selector best fits how you are applying css in your app, I used input just as an example.

How this works is input elements are by default inline-block, and will sit side by side. Div elements are block level elements by default, which will try and stack. Changing the input to be also block will now stack the input and div.

Just mark your error as display: inline-block and it'll be next to the input field.

#nameErr {
  display: inline-block;
}

Codepen

The fastest solution is to use add display: inline-block to your input tag. I suggest you to inspect your page and test your changes on the html and copy it inside your css file once you're satisfied.

You just need to put display: block for error class so it will e below the input box. By default it is the "inline-block" just inspect find the class.

Without your own CSS style, it's hard to pin down where your code got buggy and what can be fixed to achieve what you want. Nevertheless, I have created a minimal working example below (try inserting a character in the text field, then emptying the text field):

const input = document.querySelector('input')
const error = document.querySelector('.error')

input.addEventListener('keyup', e => {
  error.style.opacity = !input.value ? 1 : 0
})

* {
  font-family: sans-serif;
}

input {
  display: block;
  padding: 10px;
  width: 35vw;
  border-radius: 5px;
  border: 1px solid #00000022;
}

input:focus {
  border: 1px solid #1aa3e8DD;
}

input::placeholder {
  color: #000000AA;
}

.error {
  padding: 10px;
  padding-top: 5px;
  font-size: .75rem;
  color: #FF0000BB;
  opacity: 0;
}

<input type="text" name="username" id="username" class="form-control" placeholder="Your username">
<div class="error" id="nameErr">Username cannot be empty</div>