twitter-bootstrap - 提交验证错误后在 div 中添加一个类

Question

提交验证错误后在 div 中添加一个类

我的代码是：

<div class="control-group">
    <label class="control-label">Name</label>

    <div class="controls">
        <?php echo $this->Form->input('name', array('type'=>'text','label' => false, 'pattern' => "^[a-zA-Z][a-zA-Z ]{4,}$",
                                                  'title' => "Minimum 5 letters.", "id" => "name",
                                                  'placeholder' => 'Enter your Name', 'required' => true,)); ?>
    </div>
</div>

但如果验证失败，我希望在表单提交后这样做：

<div class="control-group error">
    <label class="control-label">Name</label>

    <div class="controls">
        <?php echo $this->Form->input('name', array('type'=>'text','label' => false, 'pattern' => "^[a-zA-Z][a-zA-Z ]{4,}$",
                                                  'title' => "Minimum 5 letters.", "id" => "name",
                                                  'placeholder' => 'Enter your Name', 'required' => true,)); ?>
    </div>
</div>

Answer 1

一种方法是使用 javascript 添加类。例如，您可以执行类似的操作

<div class="control-group" id="THISELEMENT">
    <label class="control-label">Name</label>

    <div class="controls">
        <?php echo $this->Form->input('name', array('type'=>'text','label' => false, 'pattern' => "^[a-zA-Z][a-zA-Z ]{4,}$",
                                                  'title' => "Minimum 5 letters.", "id" => "name",
                                                  'placeholder' => 'Enter your Name', 'required' => true,)); ?>
    </div>
</div>


<script>
document.getElementById("THISELEMENT").className += " error";
</script>