CODEWITHSUNDEEP
twitter-bootstrapvalidation
user814746
user814746

Reputation:

bootstrap validator adds has-error class on valid input

I've created a form that is divided in 4 tabs, and i've added the bootstrap validator to the form to test the validity on the input.

On this jsfiddle.net i've recreated part of the form.

http://jsfiddle.net/2sgmkdnf/1/

When you press submit without entering any data into the form, it will display the X symbol and color the input red. As it should.

However, other input that are valid also show red. It does show the ok symbol. but the box is colored red.

Im i doing something wrong?

html

<form method="post" id="mainForm">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#regi" data-toggle="tab" class="tab" id="regi_tab">Registrant</a>

            </li>
            <li><a href="#admin" data-toggle="tab" class="tab" id="admin_tab">Administrative</a>

            </li>
            <li><a href="#tech" data-toggle="tab" class="tab" id="tech_tab">Technical</a>

            </li>
            <li><a href="#billing" data-toggle="tab" class="tab" id="billing_tab">Billing</a>

            </li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active form-group" id="regi">
                    <h3>Registrant</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="regi_form_fname" type="text" value="">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="regi_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="admin">
                    <h3>Administrative</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="admin_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="admin_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tech">
                    <h3>Technical</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="tech_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="tech_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="billing">
                    <h3>Billing</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="billing_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="billing_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <input class="btn btn-success" name="dosubmit" type="submit" value="Update Domain Contacts">
</form>

javascript

$(document).ready(function () {

    $('#mainForm')
        .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'regi_form_fname': {
                validators: {
                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'regi_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'admin_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'admin_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'tech_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'tech_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'billing_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'billing_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            }
        }
    });
});

Upvotes: 1

Views: 2535

Answers (1)

dannytranlx
dannytranlx

Reputation: 175

This was a little tricky. The catch was you added the .form-group class to the #regi container over both fields and when the first one had an error, the #regi container was added the .has-error class so the whole thing was invalid (adding by mistake the .has-error to the valid field).

Remove form-group on this line :

<div class="tab-pane active form-group" id="regi">

to make it : 

<div class="tab-pane active" id="regi">

This should fix it :)

Upvotes: 1

Related Questions