将错误消息放在Bootstrap输入中

Question

I have a PHP that validates if a input is empty if it is an error message is displayed e.g Email required, I am using Bootstrap for my form. Originally the message is displayed under the input (which I don't want).

Code im currently using:

<label>Number Of Rooms: </label>                                            
<input type="number" class="form-control input-sm" max="10" name="Rooms" value="<?php echo $RoomErr;?>">
<span class="error">* <br><?php echo $RoomErr;?></span>

here is the link to the website website

I want to display the error message inside the text input i tried assigning the error to the value of the input:

<label>Number Of Rooms: </label>                                            
<input type="number" class="form-control input-sm error" max="10" name="Rooms" value="<?php echo $RoomErr;?>">

The following does not work.

My CSS just assigns the error to color red

.error{
color:red;
}

I can't find much stuff about this.

Answer 1

You can try like this, because it is working as a placeholder.

 <input type="number" class="form-control input-sm error" max="10" name="Rooms" placeholder="<?php echo $RoomErr;?>">