如何修复超出范围的输入？

Question

我想修复我的html / bootstrap样式，但是当我点击该事件时，所有我的输入都超出范围，因为当我输入错误时，图片编号为1。但是我想修改我的输入，当我点击我的事件并从jquery获得错误时保持与图片2相同的地方

html

 <form id="new_product">
        <div class="form-group">
            <label for="description">Name: </label>
            <input type="text" class="form-control" id="description" name="description" title="product description" required>
        </div>
        <div class="form-group form-inline">
            <div class="form-group">
                <div class="col-md-5">
                    <label for="cost_price">Cost Price: </label>
                    <input type="text" class="form-control" id="cost_price" name="cost_price" title="cost_price" required>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5">
                    <label for="selling_price">Selling price: </label>
                    <input type="text" class="form-control" id="selling_price" name="selling_price" title="selling_price" required>
                </div>
            </div>
        </div>
        <div class="form-group form-inline">
            <div class="form-group">
                <div class="col-md-5">
                    <label for="wprice">Wholeprice: </label>
                    <input type="text" class="form-control" id="wprice" name="wprice" title="wprice" required>
                </div>
            </div>
          <div class="form-group">
            <div class="col-md-5">
              <label for="min_stock">Min stock: </label>
              <input type="text" class="form-control" id="min_stock" name="min_stock" title="min_stock" required>
            </div>
          </div>
            <div class="form-group">
                <div class="col-md-5">
                    <label for="stock">Stock: </label>
                    <input type="text" class="form-control" id="stock" name="stock" title="stock" required>
                </div>
            </div>
          <div class="form-group">
            <div class="col-md-5">
              <label for="max_stock">Max stock: </label>
              <input type="text" class="form-control" id="max_stock" name="max_stock" title="max_stock" required>
            </div>
          </div>
        </div>
    </form>

form_view

form_view2

jquery验证

 $('#add').on('click',function(){
        $("#description").mask("(999) 999-9999");
        $("#new_product").validate();
        BootstrapDialog.show({
            type: BootstrapDialog.TYPE_PRIMARY,
            message: function(dialog) { 
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);

                return $message;
            },
            data: {
                'pageToLoad': URL_GET_VIEW_PRODUCT
            },
            closable: false,
            buttons:[{
                id: 'btn-ok',
                cssClass: 'btn-primary',
                icon: 'glyphicon glyphicon-send',
                label: ' Save',
                action: function (e) {
                    var description = $('#description').val();
                    var cost_price = $('#cost_price').val();
                    var selling_price = $('#selling_price').val();
                    var wprice = $('#wprice').val();
                    var min_stock = $('#min_stock').val();
                    var stock = $('#stock').val();
                    var max_stock = $('#max_stock').val();
                    if($("#new_product").valid()){
                        $.ajax({
                            url: URL_GET_ADD_PRODUCT,
                            type: 'POST',
                            data: {description: description, cost_price: cost_price, selling_price: selling_price, wprice: wprice, min_stock: min_stock, stock: stock, max_stock: max_stock}
                        }).done(function (data) {
                            console.log(data);
                            if (data.msg == 'successfully added') {
                                $('#new_product')[0].reset();
                                table.ajax.reload();
                            }else if(data.min_stock == 'el stock no puede ser mayor al min'){
                                BootstrapDialog.show({
                                    type: BootstrapDialog.TYPE_WARNING,
                                    message: 'el stock no puede ser mayor al min'
                                });
                            }
                        });
                        return false;
                    }
                }
            },{
                id: 'btn-cancel',
                cssClass: 'btn-danger',
                icon: 'glyphicon glyphicon-remove',
                label: ' Cancel',
                action: function (e) {
                    e.close();
                }
            }]
        });
    });