Reading through the docs with tooltip form validation it appears below the input. When I read the docs regarding customization of tooltip placement with the data attribute it would appear this should work:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
<form class="row g-3 needs-validation" novalidate>
<div class="col-3">
<div class="input-group">
<select class="form-select" aria-label="Select Day" required>
<option selected disabled value="">Please select a day</option>
<option value="mon">Monday</option>
<option value="tues">Tuesday</option>
</select>
<div class="invalid-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Day tooltip">
Please select a day
</div>
</div>
</div>
<div class="col">
<button id="build" type="submit" class="btn btn-outline-success">Submit</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
when adding:
data-bs-toggle="tooltip" data-bs-placement="top"
Research:
How to put bootstrap tooltip on textbox if validation fails for that textbox?
showing validation error message like tooltip [closed]
How to put a tooltip on input when its not valid
Javascript validation with bootstrap tooltip
Bootstrap tooltip for form validation
How do I create a tooltip showing a validation error pointing to a field when the submit button is pressed using Javascript
In Bootstrap 5 how can I modify the location of the validation tooltip with a data attribute?
This is a complicated question to answer, but I'll try.
The Tooltips method for form validation described in the docs does not leverage the ToolTips API ... it just uses it's styling insofar as color and shape.
How it works is with a "~" (immediately preceding) CSS selector and is set at "display: none" initially. Once a form validates, it triggers the styling with a CSS :valid selector. So the "tooltip" must immediately precede the form element (input or any of the others).
The "valid-toolip"/"invalid-tooltip" classes have 3 very important attributes you need to be aware of:
position: absolute;
top: 100%;
z-index: 5;
Also, the form field is contained in a "position-relative" class, so the "tooltip" positions itself at the bottom of that div (or rather at 100% from the top).
If for example you wanted to position the "tooltip" at the top of the "field container div" you'd need to set "top: 0" in some custom CSS class or just inline with a style attribute, like so:
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip" style="top: 0">
Looks good! (Top)
</div>
</div>
Have a look at this JSFiddle for some examples.
I'm trying to make a placeholder validation effect that when a field is required, its placeholder changes its color form white to red. Please help me with this. I've tried webkits and bootstrap "control label" but its not working properly. With the control label class its working properly on firefox but not in google chrome.
This is what i've tried
<div class="form-group">
<input type="text" required="required" class="control-label text-fields" placeholder="Name" />
</div>
<div class="form-group">
<input type="number" required="required" class="control-label text-fields" placeholder="Phone" />
</div>
<div class="form-group">
<textarea class="control-label field" type="text" rows="2" placeholder="Address" required></textarea>
</div>
<div class="form-group">
<textarea class="control-label field" type="text" rows="1" placeholder="Comments" required></textarea>
</div>
<CSS>
::-webkit-input-placeholder {
color: white;
}
input:required {
color:#red !important;
box-shadow: none;
}
input:valid {
color:#fff !important;
box-shadow: none;
}
textarea:required {
color:#red !important;
box-shadow: none;
}
textarea:valid {
color:#fff !important;
box-shadow: none;
}
Use the [required] attribute selector to add the color just to required fields.
[required]::-webkit-input-placeholder { /* WebKit browsers */
color: red;
}
[required]::-moz-placeholder { /* WebKit browsers */
color: red;
}
[required]::-ms-input-placeholder { /* WebKit browsers */
color: red;
}
<input type="text" placeholder="not required" />
<br>
<input type="text" placeholder="required" required/>
Is there any way to use Bootstrap's form field validation states/classes (warning, error, info, success) on form-inline fields (without using control-group)?
I'm using Bootstrap, and I have a large form that uses the form-horizontal class for layout. However, there are areas within the form where the fields need to be inline (for example, City/State/Zip). I'm using form-inline for this, which works fine. Here's the basic markup:
<form id="account-form" class="form-horizontal" method="post" action="" novalidate>
<!-- Address -->
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<input type="text" name="address" />
</div>
</div>
<!-- City, State, Zip -->
<div class="control-group">
<label class="control-label">City</label>
<div class="controls form-inline">
<input type="text" name="city" />
<label>State</label>
<input type="text" name="state" />
<label>Zip Code</label>
<input type="text" name="zipcode" />
</div>
</div>
</form>
In my particular situation I need to handle validation manually. Unfortunately, it seems Bootstrap's validation state classes must be applied to the control-group; as you can see in the example above, the control-group in my case contains multiple fields. I tried wrapping individual fields within control-group spans or divs, but control-group does not play nicely at all when used with both a form-inline and form-horizontal together!
Is there a CSS class or other rule I can attach to a field directly (or an otherwise-innocent field wrapper) to apply these styles to individual fields, without having to completely redeclare all the standard bootstrap styles??
You could create some custom less code and recompile bootstrap:
Add #import "_custom.less"; to less/bootstrap.less
create less/_custom.less:
// Mixin for inline form field states
.inlineformFieldState(#warning: success,#textColor: #555, #borderColor: #ccc, #backgroundColor: #f5f5f5) {
// Set the text color
label.#{warning},
.help-block .#{warning},
.help-inline .#{warning}{
color: #textColor;
}
// Style inputs accordingly
.checkbox .#{warning},
.radio .#{warning},
input.#{warning},
select.#{warning},
textarea.#{warning} {
color: #textColor;
}
input.#{warning},
select.#{warning},
textarea.#{warning} {
border-color: #borderColor;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(#borderColor, 10%);
#shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(#borderColor, 20%);
.box-shadow(#shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on .#{warning},
.input-append .add-on .#{warning} {
color: #textColor;
background-color: #backgroundColor;
border-color: #textColor;
}
}
.form-inline{
.inlineformFieldState(success, #successText, #successText, #successBackground);
.inlineformFieldState(warning, #warningText, #warningText, #warningBackground);
.inlineformFieldState(info, #infoText, #infoText, #infoBackground);
.inlineformFieldState(error, #errorText, #errorText, #errorBackground);
}
This mixin is based on .formFieldState in less/mixins.less. After recompile bootstrap you could use (see also: http://jsfiddle.net/bassjobsen/K3RE3/):
<form>
<div class="container">
<div class="control-group">
<div class="controls form-inline">
<label class="error">City</label>
<input class="error" type="text" name="city" />
<label class="warning">State</label>
<input class="warning" type="text" name="state" />
<label class="success">Zip Code</label>
<input class="success" type="text" name="zipcode" />
<label class="info">Street</label>
<input class="info" type="text" name="street" />
</div>
</div>
</div>
</form>
I do this, remove control-group from div container and use form-group instead, but put this in each input div, I do not secure that works with control-group.
This url maybe can help you http://formvalidation.io/examples/complex-form/, this not work for me ^_^!.I hope help you.
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 form-group" >
<select class="form-control" name="pais">
<option value="" selected disabled>Pais</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="col-lg-4 form-group" >
<select class="form-control" name="estado">
<option value="" selected disabled>Estado</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="">C</option>
</select>
</div>
<div class="col-lg-4 form-group">
<select class="form-control" name="ciudad">
<option value="" selected disabled>Ciudad</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
</div>
something like this will work.
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
//******** added custom code.
$('input[type="radio"]').closest('.col-sm-9').find('.invalid-feedback').hide();
$('input[type="radio"]:invalid').closest('.col-sm-9').find('.invalid-feedback').show();
}, false);
//******** added custom code.
});
}, false);
})();
</script>
code above is almost of document, added custom code at the end of submit event listener.
#read
https://getbootstrap.com/docs/4.0/components/forms/#validation
I'm using the free version of kendo UI web. I'm showing a progress indicator using the code:
kendo.ui.progress($('#loginform'), true);
where $('#loginform') is the div that I'd like to show the progress indicator over. I was under the impression the progress indicator would be contained and centered within the div that I provide to the function. However, it appears to be showing over the entire page instead. I've also tried:
kendo.ui.progress('#loginform', true);
and
kendo.ui.progress('loginform', true); (which caused an error).
I assume I'm not wrong about the way it's supposed to work, otherwise why would the function take the name of a div at all. Any ideas as to what I'm doing wrong?
As far as I can tell, I'm doing the same thing. Here is my HTML:
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username" />
<input type="password" id="password" class="input-block-level" placeholder="Password" />
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me" /> Remember me
</label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
Sorry, I can't seem to figure out how to format it correctly.
I think the jsFiddle example only looks centered because that tab is the entire page in the example.
You need to define positioning for loginform either relative, absolute or fixed.
Try adding the following CSS definition:
#loginform {
position: relative;
}
You need this because the progress tries to completely cover the HTML element that contains it. To do that, it defineswidth and height as 100%. So, to constrain its size to the size of the container (and do not overflow it), you need to define the position as one of these.
It might also work if some of the ancestor have one of these positioning. In this case it will cover the 100% of this and not the 100% of the immediate ancestor.
Example: Define the following styles
#container1 {
position: fixed;
border: 1px solid red;
margin: 3px;
}
#container2 {
position: static;
border: 1px solid green;
margin: 30px;
}
and the HTML as:
<div id="container1">
<div id="container2">
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username"/>
<input type="password" id="password" class="input-block-level" placeholder="Password"/>
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me"/> Remember me </label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
</div>
</div>
You will see that it covers 100% of container1 since this is fixed while container2 is static.
I have some troubles with TabStrip in relative position div, tabs doesn't switch, if I use them in the way as:
<div style="position: relative">
<div style="padding: 100px 100px 100px 100px; position: absolute">
<div id="myTabs">
<ul>
<li class="k-state-active">item1</li>
<li>item2</li>
</ul>
<div>
<input type="text" value="" class="k-textbox" style="width: 100px" />
</div>
<div>
<input type="text" value="" class="k-textbox" style="width: 100px" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myTabs").kendoTabStrip();
}
</script>
May be some one faced with such problem, or there is a mistake in my example ?
If document.ready is removed, the code works fine. Please check this JSFiddle: http://jsfiddle.net/Lu9Qf/20/
<script type="text/javascript">
$("#myTabs").kendoTabStrip();
</script>