How to change the color of only one element in a form-group with several others?

Question

How to change the color of only one element in a form-group with several others?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Hello

What happens to me is the following:

I'm using the Bootstrap Validator to validate the fields on my form. However, when you rotate the page, the fields are getting as follows. Note that the "Code" field is disabled. Only the "Social Reason" was validated. I would like only this field to appear in red.

TheproblemisthatIhavetokeepbothfieldsinthesameform-groupsotheystayonthesameline.Byseparatingthefieldsintodifferentform-groups,thecolorchangescorrectly,butthefieldsaremisaligned.BelowmyHTML.

Is there a way to apply the color only to the fields I want?

html jquery css twitter-bootstrap jquery-validate

asked by anonymous 20.06.2014 / 17:01

4 answers

Stack Frame - Example Remove schedules from the array if it does not satisfy a certain amount of periods required

score 1 · Answer 1

To keep styling separate, you can not use more than one form field within the element with the form-group class.

See in: link . Even with each field in a "form-group", they are on the same line, in which case you pose to use an additional class for the fields that should be on separate lines.

score 0 · Answer 2

You will not apply color to just the fields you want - on the contrary, you will delete the colors of the fields you do not want.

For this, you will add to the property excluded of bootstrapValidator the fields that are :disabled :

$(formSelector).bootstrapValidator({
    excluded: ':disabled'

    [...]
});

score 0 · Answer 3

0

I believe you should create a separate CSS code for this field or remove% with% of% with%.

20.06.2014 / 17:06

score 0 · Answer 4

Invert your code to look like this:

<div class="col-lg-2">
    <div class="form-group">
        <label></label>
        <input />
    </div>
</div>

<div class="col-lg-10">
    <div class="form-group">
        <label></label>
        <input />
    </div>
</div>

In this way, you will have colunas separated from form-group and you can validate inputs separately.