Form not submitting after form validation - forms

Question

I have a form in a modal window :
<div class="modal fade bs-example-modal-lg" id="vp" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form id="create_job" method="post" action="?create">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Job number - Jxxxx" name="job_number">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Part number - xxxxxx" name="part_number">
</div>
<div class="col-md-2"><p class="form-control-static text-right"><b>Cable length (m):</b></p></div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Cable" value="06" name="cable">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="submitButton" class="btn btn-primary">Submit</button></form>
</div>
</div>
</div>
</div>
This is the validation js:
$(document).ready(function() {
$('#create_vpf_job').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
job_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
part_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
cable: {
validators: {
notEmpty: {
message: ' '
}
}
}
}
});
});
I've look online for same problems but I haven't found a solution. The submit button doesn't submit. I'm using formvalidation.io for validation and nothing from their docs helped me.
Also tried adding with no luck
$('#create_job').submit();

Answer 1

Your HTML is bad formatted, and the form is closing after the container div closes, so the submit button doesn't know what to submit. Change it to:
<div id="vp" class="modal fade bs-example-modal-lg">
<div role="document" class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form action="?create" method="post" id="create_job">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" name="job_number" placeholder="Job number - Jxxxx" class="form-control" />
</div>
<div class="col-md-4">
<input type="text" name="part_number" placeholder="Part number - xxxxxx" class="form-control" />
</div>
<div class="col-md-2">
<p class="form-control-static text-right">
<b>Cable length (m):</b>
</p>
</div>
<div class="col-md-2">
<input type="text" name="cable" value="06" placeholder="Cable" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-primary" name="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And it will work. On this plunkr you can check that it's giving a bad-request response, which is good news, because it means the request is being done, and so, the form is being submitted once the correction made