在输入组插件类下添加文本

Question

大家好，这个怎么解决？当字段为空或为空时，我收到了这些错误。我想修复输入文本的布局，输入组插件和输入文本应该具有相同的高度。顺便说一句，一旦我单击提交按钮，如果字段为空，则会出现错误。我正在使用 jquery/ajax 来显示错误。有什么解决方案可以将错误消息放在输入组类下吗？我怎样才能做到这一点？谢谢！

Sample Image

public function insert_officials() {
    $data = array('success' => false, 'messages' => array());

    $name   = array('official_name','official_contact','official_position');
    $label  = array('Name', 'Phone', 'Position');
    $verify = 'trim|required';
    $number = 'required|regex_match[/^[0-9]{10}$/]';
    $this->validate($name[0], $label[0], $verify);
    $this->validate($name[1], $label[1], $number);
    $this->validate($name[2], $label[2], $verify);
    $this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');

    if($this->form_validation->run()) {
        $data['success'] = true;
    } else {
        foreach($_POST as $key => $value) {
            $data['messages'][$key] = form_error($key);
        }
        echo json_encode($data);
        exit;
    }

    $data = array (
        $name[0] = $this->pass($name[0]),
        $name[1] = $this->pass($name[1]),
        $name[2] = $this->pass($name[2])
    );

    //$this->model->CreateOfficials($data);
}

 

    function add_officials() {
    $('#FormAddOfficials').submit(function(e) {
        e.preventDefault();
        var url = $(this);
        var data = {
            official_name : $('#official_name').val(),
            official_position : $('#official_position').val(),
            official_contact : $('#official_contact').val()
        }
        $.ajax({
            type: 'POST', url: url.attr('action'), data: data, cache: false, dataType: 'json',
            success:function(data) {
                if(data.success == true) {
                    successful(data.success,data.bgcolor,data.color,data.message);
                } else {
                    $.each(data.messages, function(key,value) {
                        //key => id of an input, value => error message
                        var element = $('#' + key);

                        element.closest('div.form-group')
                        .removeClass('has-error')
                        .addClass(value.length > 0 ? 'has-error' : 'has-success')
                        .find('.text-danger').remove();
                        element.after(value);
                    });
                }
            }
        });
    }); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?=base_url();?>execute/insert" id="FormAddOfficials" name="FormAddOfficials" autocomplete="off" class="nobottommargin" method="POST">
    <div class="row">
        <div class="col-lg-4 col-md-8 col-xs-12">
           <div class="form-group">
              <label class="control-label" for="official_name">Name<small> *</small></label>
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user-o" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="official_name" id="official_name" placeholder="Enter name">    
              </div>
           </div>
        </div>
        <div class="col-lg-4 col-md-8 col-xs-12">
             <div class="form-group">
                <label class="control-label" for="official_contact">Phone<small> *</small></label>
                <div class="input-group">
                   <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
                   <input type="text" class="form-control" name="official_contact" id="official_contact" placeholder="Enter phone">
                   **<p>Error message will go here!!</p>**  
                </div>
                ***<p>I want to place the paragraph here!</p>***
             </div>
          </div>
          <div class="col-lg-4 col-md-8 col-xs-12">
             <div class="form-group">
                <label class="control-label" for="official_position">Position<small> *</small></label>
                <div class="input-group">
                   <span class="input-group-addon"><i class="fa fa-address-card-o" aria-hidden="true"></i></span>
                   <select class="form-control" name="official_position" id="official_position">
                      <option value="" hidden>Select position</option>
                      <option>asd</option>
                      <option>qwe</option>
                   </select>
                </div>
             </div>
          </div>
       </div>
       <div class="margintop-xs">
          <button type="submit" class="btn btn-success" id="btn-officials"><i class="fa fa-check" aria-hidden="true"></i>Submit</button>
          <button type="reset" class="btn btn-default" id="btn-reset">Cancel</button>
       </div>
   </form>

Answer 1

嗯，如果你在添加错误信息的时候得到.input-group，这个问题解决了吗？

var element = $('#' + key).closest('.input-group');