0

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.

Improve this question
8
  • add the class error to your input as class="form-control input-sm error" Commented Jul 28, 2017 at 10:43
  • Raushan is right <input type="number" class="form-control input-sm error"> Commented Jul 28, 2017 at 10:46
  • I have added it but the error is not displaying isnide the input still. Commented Jul 28, 2017 at 10:47
  • Please show validation js here Commented Jul 28, 2017 at 10:50
  • 1
    You can try like this <input type="number" class="form-control input-sm error" max="10" name="Rooms" placeholder="<?php echo $RoomErr;?>"> Commented Jul 28, 2017 at 10:55

2 Answers 2

Reset to default
3

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;?>">
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

But, now the message is inside but its not red what could be the problem?
because placeholder is not has class
this is the link for help you stackoverflow.com/questions/33864832/…
0

Please try this. I am using position:absolute; And manage this

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>

Improve this answer

1 Comment

@ChandraShekhar its not.. the error is displaying all over the place.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.