ブートストラップ入力内にエラーメッセージを配置します。

Question

エラーメッセージが表示された場合、入力が空であるかどうかを検証するPHPがあります。たとえばメールが必要です。フォームにブートストラップを使用しています。もともと、メッセージは入力の下に表示されます（私は望みません）。現在使用して

コードイム：ここ

<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

は私が入力の値に誤差を代入しようとしたテキスト入力の内部エラーメッセージを表示するWebサイトへのリンクです：

<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

あなたは、このように試すことができます管理。 `クラス= "フォームコントロール入力-SMエラー" としてご入力にクラス` ERROR`を追加

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

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