Error Message not getting displayed

Question

Hi

$('#locationFormId').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            Id: {
                validators: {
                    notEmpty: {
                        message: 'Id is required and cannot be empty'
                    }
                },
                stringLength: {
                    max: 4,
                    message: 'Id must not be more than 4 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z\.]+$/,
                    message: 'Id can only consist of alphabets.'
                }
            },
            Description: {
                validators: {
                    notEmpty: {
                        message: 'Description is required and cannot be empty'
                    }
                },
                stringLength: {
                    max: 25,
                    message: 'Description must not be more than 25 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z\.]+$/,
                    message: 'Description can only consist of alphabets.'
                }
            }
        }
    });

*******************************************************************************************

@using (Html.BeginForm("CreateEdit", "Location", FormMethod.Post,new { @id = "locationFormId", @class = "form-horizontal", role = "form" }))
        {
            <input type="hidden" id="hfAU" name="hfAU" value="A"/>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>Close</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="Id">Id <span class="required">*</span></label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control text-left" id="txtId" name="Id" placeholder="Id" autofocus="autofocus">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="Description">Description </label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control text-start" id="txtDescription" name="Description" placeholder="Description">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        }

Thanks