Getting error in input-group-addon when validating the field using ajax and jquery in codeigniter

Question

Now its been 46 day's till i am stuck with this. Or there is Another way to Do this.

I Know This very simple But How can i wrap input-group under form-group. I am submitting the form data in codeigniter using ajax and showing validation errors. The issue is that input-group-addon wraps to the next line underneath the form field when the error control is added by Jquery Validate.

Controller

function infoValidation() {
        $result = array('status' => false, 'message' => array());

        $this->form_validation->set_error_delimiters('<div class="text-danger">','</div>');
        if ($this->form_validation->run('company_registration')) {

                $result['status'] = true;

        }else {

            foreach ($_POST as $key => $value) {

                $result['message'][$key] = form_error($key);
            }
        }

        echo json_encode($result);
    }

view

<div class="col-lg-6">
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">*</span>
        <input type = "text" name="creditCardNumber" class="form-control input-md" id="creditCardNumber" placeholder="Mobile No">
    </div>
</div>

ajax

I have also try to append the element But Nothing Happens

$.ajax({
        url : me.attr('action'),
        dataType : 'json',
        type : 'POST',
        data : me.serialize(),
        success: function(resp) {
            console.log(resp);
            if (resp.status == true) {
                $('#myModal').modal('show');

                $(".form-group").removeClass('has-error').removeClass('has-success');
                $(".text-danger").remove();
            }else {
                $('#msg').html('<div class="well"><h5>Please Check Your Details</h5></div>');
                $.each(resp.message, function(key, value) {

                    var element = $("#"+key);
                        element.closest('div.form-group, div.input-group')
                               .addClass(value.length > 0 ? 'has-error' : 'has-success')
                               .find('.text-danger').remove();

                        element.after(value);
                });
            }
        }
    });

Ahmed Ginani Ahmed Ginani · Accepted Answer · 2017-04-29T06:42:58

I think you need to override the jQuery validate plugin method in order to get compatibility with bootstrap.

Refer http://jsfiddle.net/mapb_1990/hTPY7/7/

Example code

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Getting error in input-group-addon when validating the field using ajax and jquery in codeigniter

1 Answers