question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Default CSS class for validation messages is incorrect in Bootstrap 3

See original GitHub issue

When rendering a validation message, BMVC adds the class help-inline to the <span> tag wrapped around the message. This class no longer appears to be relevant in Bootstrap 3. The only help-related class in the Bootstrap 3 source is help-block.

I can work around the issue by explicitly requesting a block-level validation message, but it really should be the default for Bootstrap 3.

Issue Analytics

  • State:open
  • Created 10 years ago
  • Comments:19 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
DmitryEfimenkocommented, Sep 15, 2013

It is true that has-error class has effect on help-block. However, I didn’t even notice it because the default project creates a css file with default validation related css rules:

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

Just tweak these to match error colors to Bootstrap colors and you are good to go. I think this is a better solution than messing with margins.

0reactions
Jak3b0commented, Sep 17, 2013

Sorry, I misread your last post…

Having a way to attach a custom class name would be ok. But it there really time that you will not want the validation message to follow the error status of the form-group? For me, using ShowValidationMessage() is like using HelpText() but with the shortcut of having the validaton message extracted automatically for me.

If the option to specify a custom class for the ShowValidationMessage() is chosen, I think that the HelpText() should follow the same rule.

What do you guys think?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap 3 Validation state, 'Error' showing by default
When you add the class has-error to the form-group div.. Bootstrap is only applying the CSS error on elements inside of the from-group....
Read more >
Validation · Bootstrap v5.3
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
Read more >
Validation · Bootstrap v5.0
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
Read more >
Forms
It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only ......
Read more >
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Overview. Get the lowdown on the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found