![](/img/trans.png)
[英]How to give a friendly error message inside a modal with Bootstrap form?
[英]Place error message inside a Bootstrap input
我有一個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>
這是網站網址的鏈接
我想在嘗試將錯誤分配給輸入值的文本輸入中顯示錯誤消息:
<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;
}
我找不到很多有關此的東西。
您可以嘗試這樣,因為它正在充當占位符。
<input type="number" class="form-control input-sm error" max="10" name="Rooms" placeholder="<?php echo $RoomErr;?>">
請嘗試這個。 我正在使用position:absolute; 並管理這個
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.