Reload Bootstrap Modal on PHP variable not valid - php

Question

Having some problems with the error handling of a bootstrap modal. In the modal I have two inputs (both are required). I want to be able to display a simple "required" message if the form is submitted without one of the fields populated.
I tried doing this with PHP and it works in a page by itself, but when I put it in a modal the modal closes on submit and then if you re-open the modal you see the error messages. I really want the modal to stay open or re-open if the input fields are not valid when the user submits.
Any help would be appreciated! Thanks!
HTML (Start of the modal):
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add a vCenter</h4>
</div>
<div class="modal-body">
PHP (To graph the input and report any errors):
if ( !empty($_POST)) {
// keep track validation errors
$vcenternameError = null;
$vcenterownerError = null;
// keep track post values
$vcentername = $_POST['vcentername'];
$vcenterowner = $_POST['vcenterowner'];
// validate input
$valid = true;
if (empty($vcentername)) {
$vcenternameError = 'Please enter vCenter Name';
$valid = false;
}
if (empty($vcenterowner)) {
$vcenterownerError = 'Please select vCenter Owner';
$valid = false;
}
// insert data
if ($valid) {
$sql = "INSERT INTO ";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
header("Location: index.php");
}
}
?>
HTML (the rest of the modal):
<div class="panel-body">
<form class="form-horizontal" action="index.php" method="post">
<div class="<?php echo !empty($vcenternameError)?'error':'';?> form-group">
<div class="alert alert-warning">
Please input the FQDN of the vCenter and select an owner.
</div>
<label class="control-label">vCenter Name</label>
<div class="controls">
<input name="vcentername" type="text" placeholder="vCenter Name" value="<?php echo !empty($vcentername)?$vcentername:'';?>" class="form-control">
<?php if (!empty($vcenternameError)): ?>
<div class="alert alert-warning alert-dismissable">
<?php echo $vcenternameError;?>
</div>
<?php endif; ?>
</div>
</div>
<div class="<?php echo !empty($vcenterownerError)?'error':'';?> form-group">
<label class="control-label">vCenter Owner</label>
<div class="controls">
<div class="btn-group" data-toggle="button" role="group" aria-label="...">
<label class="btn btn-default">
<input type="radio" name="vcenterowner" value="Team1"> Team1
</label>
<label class="btn btn-default">
<input type="radio" name="vcenterowner" value="Team2"> Team2
</label>
<label class="btn btn-default">
<input type="radio" name="vcenterowner" value="Team3"> Team3
</label>
</div>
<?php if (!empty($vcenterownerError)): ?>
<div class="alert alert-warning alert-dismissable">
<?php echo $vcenterownerError;?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<button type="submit" class="btn btn-success">Add</button>
<a class="btn btn-default" href="index.php">Back</a>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

You can use jQuery to open the modal again if the modal contains errors when the page loads:
var modal = $('#createModal');
if(modal.find('div.alert-warning').length)
modal.modal();
But for the best user experience, you should call your PHP script with an ajax request: http://api.jquery.com/jquery.ajax/