在 PHP 变量上重新加载引导模式无效


Reload Bootstrap Modal on PHP variable not valid

引导模式的错误处理存在一些问题。在模态中,我有两个输入(两者都是必需的)。如果提交表单时未填充其中一个字段,我希望能够显示简单的"必填"消息。

我尝试使用 PHP 执行此操作,它本身可以在页面中工作,但是当我将其放入模态中时,模态会在提交时关闭,然后如果您重新打开模态,您会看到错误消息。我真的希望模式保持打开状态或重新打开,如果输入字段在用户提交时无效。

任何帮助将不胜感激!谢谢!

HTML(模态的开头):

<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(绘制输入图形并报告任何错误):

 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(模态的其余部分):

<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>

如果模态在页面加载时包含错误,则可以使用 jQuery 再次打开模式:

    var modal = $('#createModal');
    if(modal.find('div.alert-warning').length)
        modal.modal();

但是为了获得最佳的用户体验,你应该使用 ajax 请求调用你的 PHP 脚本:http://api.jquery.com/jquery.ajax/