PHP变量上的Reload Bootstrap Modal无效

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">&times;</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/