引导程序表单组

Question

I got two inputs inside a form-group, from bootstrap framework. My problem is if the first name gives error, the second name will give aswell the same error that gives on first name, and that is not what I want, how can I can avoid this problem?

<form id="containerForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">First name</label>
        <div class="col-xs-4">
            <input required type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <label class="col-xs-3 control-label">Last name</label>

        <div class="col-xs-4">
            <input required type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>
</form>

Answer 1

This is not a complete answer but there are more post on Stackoverflow.com about this item.

Anyway as I always do I advise you to use server-side validation

But just to get you going see this example:

http://jsfiddle.net/z2zbgge3/1/