Question

我有一个使用Bootstrap的登录表单。电子邮件和密码输入控件是默认的Bootstrap控件。但我想将密码框更改为Bootstrap的'输入错误'validation state。我知道我应该让它的父div包含has-error类但我希望只有在密码不正确时才会发生（我只是从jQuery post响应中实现）。那么如何使用验证状态指示错误的密码？

无论如何，这是我的代码：

<div id="pass" class="form-group">
            <label id="lbPass" style="display:none;"  for="pwd">Password</label>
            <input tabindex="2" type="password" class="form-control" name="pwd" id="pwd" placeholder="Password">
            <label style="visibility:hidden;" id="wc" class="control-label" for="pwd" style="margin: 3px 0 5px 0;">Wrong Credentials</label>
            <span class="help-block" style="font-size:12px; font padding:2px;"><a href="" >Forgot password?</a></span>
        </div>

编辑（已解决）：

@MattD在评论中指出我应该使用jQuery的addClass（）将'has-error'类添加到密码div。它解决了这个问题。

以下是我用来更改课程的代码：

.fail(function(){

        $('#pass').addClass('has-error');

        document.getElementById('wc').style.visibility = 'visible';
    })

Answer 1

应该像根据你提供的内容通过jQuery添加类一样简单。如果验证失败，请添加类。

<强> JQUERY：

$('.btn').click(function() {
    if ( 1 > 2 ) {
        //whatevs...
    } else {
        $('#pass').addClass('has-error');
    }
});

1＆gt; 2位只是为了进入其他条件。

<强> FIDDLE

我如何使用Bootstrap的验证状态？

1 个答案: