Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/ajax to display errors if the fields are empty. Is there a way to place the error message under the input group class? Any suggestions on how to achieve this would be greatly appreciated. Thank you!
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>