This is my error:
This is my code:
<div class="col-12">
<div class="form-group has-icon-left">
<label class="form-label" for="first-name-icon">Company Name</label>
<div class="position-relative ">
<input asp-for="Name" type="text" class="form-control"
placeholder="Company Name"
id="first-name-icon" aria-describedby="inputGroupPrepend" required />
<div class="form-control-icon">
<i class="bi bi-person "></i>
</div>
<span class="invalid-feedback ">Please provide a company name.</span>
</div>
</div>
<div>
<span class="text-danger" asp-validation-for="Name"></span>
</div>
</div>
I want to show invalid feedback error message for client validation, but when I show error message under the input box thats the time input icon break the shape.
Try putting it after the form group.
<div class="col-12">
<div class="form-group has-icon-left">
...
</div>
<span class="invalid-feedback ">Please provide a company name.</span>
<div>
<span class="text-danger" asp-validation-for="Name"></span>
</div>
</div>
Related
I have the following snippet:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Name" class="form-control" placeholder="Name" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
<small>
<span asp-validation-for="Name" class="text-danger"></span>
</small>
</div>
</div>
In some situations the validation message is not displayed below the input but right next to it. How can I force the message to be displayed below the input?
You can try to put validation error message outside <div class="input-group">:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Name" class="form-control" placeholder="Name" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Name" class="text-danger"></span>
</small>
</div>
result:
I was attempting to make a contact form for my site, which can be previewed here.
I used the Bootstrap Validator script to add verification icons/checks. However, when a textbox is selected that is used with the script, the validation icon disappears, like this:
This happens with the other boxes as well (except for the Subject box, which I didn't activate the validation script for.) How would I fix this? It worked on CodePen, but not on my site.
Here's the HTML for the page.
HTML and CSS for just the form:
<div class="container">
<form class="well form-horizontal" action="https://formspree.io/example#example.com" method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Me</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Name <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Email <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="email" placeholder="Email Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Subject</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-comment"></i></span>
<input name="_subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Message <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea class="form-control" name="input" placeholder="Message"></textarea>
</div>
</div>
</div>
<!-- Config -->
<input type="hidden" name="_next" value="/contactthanks.html" />
<!-- Required fields text -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<div class="text-danger">* Required field</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><span class="fa fa-send"></span> Send</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
textarea {min-height:50px; resize:vertical;}
Thanks in advance, and sorry for the long question.
Using Chrome Developer tools, you can see that adding the :focus pseudo-class to the element increases the z-index value of the <input /> to 3, while the .form-control-feedback class maintains a z-index of 2.
Adding this selector appears to resolve it:
input:focus ~ .form-control-feedback {
z-index: 3;
}
However, my guess is that this is the intended behavior in Bootstrap so the icon does not get in the way while the user is typing.
.input-group .form-control:focus {
z-index: 3;
}
When you select an input, its icon goes behind cos of input's z index. Maybe try changin it ?
In my web page source, the JSP content is coming up twice. While validating my web page source from W3C validator I am getting the duplicate ID error.
I am not able to understand that why some HTML contents from my JSP are coming up twice in my web page?
Below is the one of the HTML content which is being repeated in web page source.`
<form id="searchBarForm" name="searchBarForm" class="form-default form-search">
<input type="hidden" id="pageNumber" name="pageNumber" value='1' />
<div class="grid-holder">
<div id="invalidMilesMsgSearchBar" role="alert" class="alert alert-danger alert-static hide">
<p>Please enter a valid points range.</p>
</div>
<div class="row grid-search grid-search-1">
<div class="col-main col-sm-9 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<label>Search
rewards </label>
</div>
<input id="searchKeyword" name="keyword" type="text" class="form-control"
placeholder="Search across all rewards" value='' />
</div>
</div>
</div>
<div class="row grid-search grid-search-2">
<div class="col-main col-sm-9 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<label>and / or by points
</label>
</div>
<div class="col-range">
<input type="tel" id="maskBarFromMile" name="fromMile" class="form-control inp-from quantity-input maskBarFromMile"
placeholder="" value='' />
<div class="sep">-</div>
<input type="tel" id="maskBarToMile" name="toMile" class="form-control inp-to quantity-input maskBarToMile" value='' />
</div>
</div>
</div>
<div class="col-main col-sm-3 col-xs-12">
<div class="bttn">
Go
</div>
</div>
</div>
<div class="row grid-search grid-search-3 hide">
<div class="col-main col-sm-9 col-xs-12">
<p class="text-label">
Let us inspare you with our Reward Finder
</p>
<div class="bttn">
<a href="#" class="btn btn-default">Reward Finder
</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
`
please write your jsp code that part generate this html, I think there is a problem in your jsp code and cause generate twice html code...
Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.
Issue:
1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the glyphicon glyohicon-date within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?
Thanks.
<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>
<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>
<button type="submit" class="btn btn-default">Reserve</button>
</form>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>
Have managed to solve it from the given link: With optional icons
<div class="form-group has-feedback">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group form-inline">
<label for="datetime" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
</div>
This is a coursera assignment of Bootstrap
using the "With optional icons" method in Bootstrap you can achieve this:
for example, my answer to this question:
<div class="form-group has-feedback">
<label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="date-choose" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
</div>
</div>
you can refer to the link below to find what you want:
http://getbootstrap.com/css/#forms-control-validation
The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.
Trying to get form data to submit to my email address. Not too sure what is wrong with the code, as no data is being sent.
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box green ">
<div class="portlet-title">
<div class="caption"> <i class="fa fa-gift"></i> Horizontal Form</div>
<div class="tools"> <a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form action="myemailaddress#gmail.com" method="post">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Block Help</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter text"> <span class="help-block">
A block of help text.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Inline Help</label>
<div class="col-md-9">
<input type="text" class="form-control input-inline input-medium" enter code hereplaceholder="Enter text"> <span class="help-inline">
Inline help.
</span>
</div>
</div>
<div class="form-group"></div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green">Submit</button>
<button type="button" class="btn default">Cancel</button>
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
Thank you for your help.
You'll need to set your form action to some sort of CGI script that's capable of catching the form POST and formatting it into an email message. PHP, perl, etc...
Here is basic PHP example... http://www.w3schools.com/php/php_forms.asp