在 Bootstrap 输入中放置错误消息

Question

我有一个 PHP 验证输入是否为空，如果显示错误消息，例如需要电子邮件，我正在为我的表单使用 Bootstrap。最初消息显示在输入下（我不想要）。

我当前使用的代码：

<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>

这里是网站的链接website

我想在文本输入中显示错误消息我尝试将错误分配给输入的值：

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

以下不起作用。

我的 CSS 只是将错误分配给红色

.error{
color:red;
}

我找不到太多关于这个的东西。

Answer 1

你可以这样尝试，因为它是一个占位符。

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

Answer 2

请试试这个。我正在使用位置：绝对；并管理这个

label {
    display: inline-block;
    margin-left: 20px;
    width: 135px;
}
.error {
    color: red;
}
.form-group .error {
    left: 165px;
    position: absolute;
    top: 5px;
}
.form-group{position:relative;}
.form-inline .form-control{display: inline-block;
    vertical-align: middle;
    width: auto;}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="col-md-9">

									<div class="container-form">
									<p><span class="error">* required field.</span></p>
									<form id="EmailForm" class="form-horizontal" action="" method="post">
									
									<div class="form-inline">
									<div class="form-group" style="position: relative;">
									<label for="first_name">Name: </label>
									<input class="form-control input-sm" name="first_name" type="text">
									<span class="error">*Name is required</span>
							</div>
						</div>
									<div class="form-inline">
									<div class="form-group">
										<label for="last_name">SurnameName: </label>
											<input class="form-control input-sm" name="last_name" type="text">
											<span class="error">*</span>
										</div>
										</div>
									<div class="form-inline">
									<div class="form-group">
										<label for="email">Email: </label>
										<input class="form-control input-sm" name="email" type="text">
										<span class="error">* Email is required</span>
										
									</div>
									</div>
									<div class="form-inline">
									<div class="form-group">
										<label>Number Of Rooms: </label>											
										<input class="form-control input-sm" max="10" name="Rooms" value="Mininum number of Hours : 3" type="number">
										<span class="error">* Mininum number of Hours : 3</span>
									</div>
									</div>
									<div class="form-inline">
									<div class="form-group">
										<label> Number hours: </label>
										<input class="form-control input-sm" min="3" name="Hours" type="number">
										<span class="error">* Mininum number of Hours : 3</span>
									</div>
									</div>
									<div class="form-inline">
									<div class="form-group">								
									<label for="description">Description of the House: </label> 
									<textarea name="description" rows="auto" class="form-control input-sm" cols="55"></textarea>
									<span class="error">* Description is required</span>
									</div>
									</div>
										<div class="form-inline">
										<div class="form-group">
										<div class="radio" style="margin-left:70px">									
										<input name="ironing" id="radiobtn" value="Yes" type="radio">
										Yes										
									</div>										
										<div class="radio">									
										<input name="ironing" id="radiobtn" value="No" type="radio">
										No										
										</div>
										<span class="error">* Ironing is Required</span>
										<span class="help-block" style="margin-left:50px">Would Like Ironing?</span>
										</div>
									</div>
									<input class="btn btn-info btn-lg" name="submit" value="Submit" type="submit">
									</form>
									</div>
							</div>