Как отображать максимальную длину ввода, когда пользователь начинает печатать?

Поле ввода моего веб-сайта выглядит следующим образом: (нажмите здесь, чтобы просмотреть изображение)

Его код в файле jsx выглядит так:

render: function () {
    return (
        <form id="addcourse" role="form" className="form-horizontal" enctype="multipart/form-data" ref="courseForm">
            <fieldset>
                <CategoryLoader callback={this.handleCategoryChange}/>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Title</label>
                    <div className="col-md-7 col-md-offset-1">
                        <input name="title" type="text"  maxLength="6" id="abcd" className="form-control" ref="title" placeholder="Title (Maximum 100 characters)"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Course Image</label>
                    <div className="col-md-7 col-md-offset-1">
                        <input name="image" type="file" className="form-control" ref="image"/>
                        <p className="help-block">Upload image for the course </p>
                    </div>
                </div>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Enrollment Type</label>
                    <div className="col-md-7 col-md-offset-1">
                        <select ref="enrollment_type" name="enrollment_type" className="form-control">
                            <option value="O">Open</option>
                            <option value="M">Moderated</option>
                        </select>
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-md-2 col-md-offset-2  addcoursebutton">
                        <button ref="submit" className="btn btn-primary" type="button" onClick={this.add_course}>Add
                            Course
                        </button>
                    </div>
                    <div className="col-md-1">
                        <button type="button" onClick={this.props.closeCallBack} className="btn btn-danger">
                            Close
                        </button>
                    </div>
                </div>
            </fieldset>
        </form>
    );

Я пробовал maxLength=6.

Для ввода не требуется более 6 символов, но он не дает никаких ошибок, например, Максимальная длина составляет 6 символов.

Итак, когда пользователь начинает вводить текст в этом поле, я хочу, чтобы он отображал сообщение в поле ввода, допускается не более 6 символов.

Как я могу это сделать?