CODEWITHSUNDEEP
twitter-bootstrap
Octopoid
Octopoid

Reputation: 3698

Bootstrap: "has-error" class not displaying

I have a small form in a system I'm working on which takes in a bank authorization code and updates the account accordingly.

I'm putting the validation in place, starting with trying to submit the form with no code provided.

I'm using the has-error class elsewhere without issue, but in this case, it doesn't seem to be working:

<div class="col-md-6 col-md-offset-3">
    <div class="panel panel-default">
        <div class="panel-heading">
            Bart Foo - Payment Received
            <div class="label label-info pull-right">Transfer</div>
        </div>
        <div class="panel-body">
            <form action="/Payments/Update/dQyQyALT3kqPRxcxLclKRQ" method="post">
                <div class="form-group has-errror">
                    <label for="ref-code">Please enter the reference number for the Transfer.</label>
                    <input type="text" placeholder="You must enter a reference code" name="ref-code" class="form-control">
                    <p>
                        <small>The user will see this authorization code in the registration portal.</small>
                    </p>
                    <p>
                        Upon approving this payment, a confirmation email will immediately be sent to the user at this address: <code>bart.foo@example.com</code>
                    </p>
                </div>
                <div class="row">
                    <div class="col-md-4 col-md-offset-8">
                        <input type="submit" value="Approve Payment" class="form-control pull-right btn-default">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

And the result:

has-error

has-error is applied to the container div, which is a form-group, and contains an input with form-control applied. What have I missed?

Upvotes: 0

Views: 6611

Answers (1)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

Your problem is simple: you wrote has-errror in your code instead of has-error 

<div class="form-group has-error">

Working bootply link

Upvotes: 5

Related Questions