Bootstrap 3: input validation class styling with input-group-btn Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag? The Ask Question Wizard is Live!Which characters are valid in CSS class names/selectors?Styling an input type=“file” buttonInput widths on Bootstrap 3Bootstrap 3 form using input-group-addon wrapping error labels with Jquery ValidateHow to get button groups that span the full width of a parent in Bootstrap?bootstrap input group btn pushed down after jquery validation kicks inBootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messagesAngular form validation and bootstrap stylesWhy is my class being overridden by bootstrap btnGetting wrong height in bootstrap input-group
When do you get frequent flier miles - when you buy, or when you fly?
Seeking colloquialism for “just because”
Why am I getting the error "non-boolean type specified in a context where a condition is expected" for this request?
What does the "x" in "x86" represent?
Why are there no cargo aircraft with "flying wing" design?
Is it true that "carbohydrates are of no use for the basal metabolic need"?
Why did the rest of the Eastern Bloc not invade Yugoslavia?
How to align text above triangle figure
Echoing a tail command produces unexpected output?
String `!23` is replaced with `docker` in command line
How to deal with a team lead who never gives me credit?
What's the purpose of writing one's academic biography in the third person?
What is Arya's weapon design?
List *all* the tuples!
At the end of Thor: Ragnarok why don't the Asgardians turn and head for the Bifrost as per their original plan?
How to call a function with default parameter through a pointer to function that is the return of another function?
Dating a Former Employee
How to find all the available tools in mac terminal?
Can an alien society believe that their star system is the universe?
Why was the term "discrete" used in discrete logarithm?
How does debian/ubuntu knows a package has a updated version
Book where humans were engineered with genes from animal species to survive hostile planets
What is the logic behind the Maharil's explanation of why we don't say שעשה ניסים on Pesach?
Should I discuss the type of campaign with my players?
Bootstrap 3: input validation class styling with input-group-btn
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?
The Ask Question Wizard is Live!Which characters are valid in CSS class names/selectors?Styling an input type=“file” buttonInput widths on Bootstrap 3Bootstrap 3 form using input-group-addon wrapping error labels with Jquery ValidateHow to get button groups that span the full width of a parent in Bootstrap?bootstrap input group btn pushed down after jquery validation kicks inBootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messagesAngular form validation and bootstrap stylesWhy is my class being overridden by bootstrap btnGetting wrong height in bootstrap input-group
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
Using Bootstrap 3.3.7. I have a form with an input number field that has buttons attached to it, to give an increment/decrement clickable feature.
When validation classes (has-success, has-error) are applied to the form-group, the correct green / red outlines are applied to input-group-addon and the input itself. The outlines are not applied to the buttons.
edit : clarification! I'm not trying to "manually target" those buttons. Bootstrap supports visually indicating valid or invalid fields by setting .has-error/.has-success to the .form-group. However Bootstrap plugins like http://1000hz.github.io/bootstrap-validator will programmatically check inputs against validation rules and, on failure or success, set the .has-error/.has-success against the form-group. So the issue is some missing CSS rules that place a green/red border around the buttons when the parent form-group has a class of .has-success/.has-failure.
I've googled and checked this site, and can't find any other posts with exactly this issue. Lots of posts with input-group-addon, which works fine, but none with the button issue. Clearly needs some classes or something, but no idea what and the issue happens with standard BS3.
The following will replicate the issue:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form>
<div class="form-group has-feedback has-success">
<label>Some input</label>
<div class="input-group">
<span class="input-group-addon">?</span>
<input step="1" value="12" class="form-control no-webkit-spinner"
name="somefield" type="number" max="9999" min="1" required>
<span class="input-group-btn">
<button class="btn btn-default" type="button">up</button>
<button class="btn btn-default" type="button">down</button>
</span>
</div>
</div>
</form>
css validation twitter-bootstrap-3
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
add a comment |
Using Bootstrap 3.3.7. I have a form with an input number field that has buttons attached to it, to give an increment/decrement clickable feature.
When validation classes (has-success, has-error) are applied to the form-group, the correct green / red outlines are applied to input-group-addon and the input itself. The outlines are not applied to the buttons.
edit : clarification! I'm not trying to "manually target" those buttons. Bootstrap supports visually indicating valid or invalid fields by setting .has-error/.has-success to the .form-group. However Bootstrap plugins like http://1000hz.github.io/bootstrap-validator will programmatically check inputs against validation rules and, on failure or success, set the .has-error/.has-success against the form-group. So the issue is some missing CSS rules that place a green/red border around the buttons when the parent form-group has a class of .has-success/.has-failure.
I've googled and checked this site, and can't find any other posts with exactly this issue. Lots of posts with input-group-addon, which works fine, but none with the button issue. Clearly needs some classes or something, but no idea what and the issue happens with standard BS3.
The following will replicate the issue:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form>
<div class="form-group has-feedback has-success">
<label>Some input</label>
<div class="input-group">
<span class="input-group-addon">?</span>
<input step="1" value="12" class="form-control no-webkit-spinner"
name="somefield" type="number" max="9999" min="1" required>
<span class="input-group-btn">
<button class="btn btn-default" type="button">up</button>
<button class="btn btn-default" type="button">down</button>
</span>
</div>
</div>
</form>
css validation twitter-bootstrap-3
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13
add a comment |
Using Bootstrap 3.3.7. I have a form with an input number field that has buttons attached to it, to give an increment/decrement clickable feature.
When validation classes (has-success, has-error) are applied to the form-group, the correct green / red outlines are applied to input-group-addon and the input itself. The outlines are not applied to the buttons.
edit : clarification! I'm not trying to "manually target" those buttons. Bootstrap supports visually indicating valid or invalid fields by setting .has-error/.has-success to the .form-group. However Bootstrap plugins like http://1000hz.github.io/bootstrap-validator will programmatically check inputs against validation rules and, on failure or success, set the .has-error/.has-success against the form-group. So the issue is some missing CSS rules that place a green/red border around the buttons when the parent form-group has a class of .has-success/.has-failure.
I've googled and checked this site, and can't find any other posts with exactly this issue. Lots of posts with input-group-addon, which works fine, but none with the button issue. Clearly needs some classes or something, but no idea what and the issue happens with standard BS3.
The following will replicate the issue:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form>
<div class="form-group has-feedback has-success">
<label>Some input</label>
<div class="input-group">
<span class="input-group-addon">?</span>
<input step="1" value="12" class="form-control no-webkit-spinner"
name="somefield" type="number" max="9999" min="1" required>
<span class="input-group-btn">
<button class="btn btn-default" type="button">up</button>
<button class="btn btn-default" type="button">down</button>
</span>
</div>
</div>
</form>
css validation twitter-bootstrap-3
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
Using Bootstrap 3.3.7. I have a form with an input number field that has buttons attached to it, to give an increment/decrement clickable feature.
When validation classes (has-success, has-error) are applied to the form-group, the correct green / red outlines are applied to input-group-addon and the input itself. The outlines are not applied to the buttons.
edit : clarification! I'm not trying to "manually target" those buttons. Bootstrap supports visually indicating valid or invalid fields by setting .has-error/.has-success to the .form-group. However Bootstrap plugins like http://1000hz.github.io/bootstrap-validator will programmatically check inputs against validation rules and, on failure or success, set the .has-error/.has-success against the form-group. So the issue is some missing CSS rules that place a green/red border around the buttons when the parent form-group has a class of .has-success/.has-failure.
I've googled and checked this site, and can't find any other posts with exactly this issue. Lots of posts with input-group-addon, which works fine, but none with the button issue. Clearly needs some classes or something, but no idea what and the issue happens with standard BS3.
The following will replicate the issue:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form>
<div class="form-group has-feedback has-success">
<label>Some input</label>
<div class="input-group">
<span class="input-group-addon">?</span>
<input step="1" value="12" class="form-control no-webkit-spinner"
name="somefield" type="number" max="9999" min="1" required>
<span class="input-group-btn">
<button class="btn btn-default" type="button">up</button>
<button class="btn btn-default" type="button">down</button>
</span>
</div>
</div>
</form>
css validation twitter-bootstrap-3
css validation twitter-bootstrap-3
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
edited Mar 8 at 18:23
Endeavor99
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
asked Mar 8 at 17:40
Endeavor99Endeavor99
356
356
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13
add a comment |
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55068333%2fbootstrap-3-input-validation-class-styling-with-input-group-btn%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55068333%2fbootstrap-3-input-validation-class-styling-with-input-group-btn%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
have you tried to target the button itself ?
– godfather
Mar 8 at 17:48
you want the input-group-btn to have green outline?
– godfather
Mar 8 at 17:55
ok i understood now it has to take the green color from bootstrap classes
– godfather
Mar 8 at 18:36
i want you to try something if you can change the input-group-btn class to input-group-addon
– godfather
Mar 8 at 18:41
sorry, that still doesn't work.
– Endeavor99
Mar 8 at 19:13