I'm trying to validate a small form in which I have 3 fields and one of them I load a select field using php, all this works fine, now when trying to use select2 for this field, jquery-validate does not seem to take it into account, and Searched for solution, but not found one that suits my validation rules in my code js, how could I solve this?.
I have reviewed several questions related to this in OS, trying to adapt it to my code but it does not work for me. I need an idea how to solve this
<form id="form-reservation" action="<?php echo base_url();?>reservation/save" method="POST">
<div class="form-group">
<label class="form-label">customer</label>
<div class="form-group">
<select class="select2" id="cus" name="cus">
<option>Select customer</option>
<?php
foreach ($get as $id => $name)
echo '<option value="',$id,'">'.$name.'</option>';
?>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Monthly amount</label>
<div class="input-group">
<input type="number" class="form-control" id="monthly" name="monthly" placeholder="0.00">
<div class="input-group-addon">$</div>
</div>
</div>
<div class="form-group">
<label class="form-label">total amount</label>
<div class="input-group">
<input type="number" class="form-control" id="total" name="total" placeholder="0.00">
<div class="input-group-addon">$</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-squared btn-info margin-inline">submit</button>
</div>
</form>
my js
$('document').ready(function(){
$(".select2").select2();
$('#form-reservation').validate({
rules: {
cus:{
required: true
},
monthly:{
number: true,
required: true
},
total:{
number: true,
required: true
}
},
highlight: function (input) {
$(input).parents('.form-group').addClass('has-danger');
},
unhighlight: function (input) {
$(input).parents('.form-group').removeClass('has-danger');
},
errorPlacement: function (error, element) {
$(element).parents('.form-group').append(error);
},
submitHandler : function(_form){
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response){
}
})
return false;
}
});});
