0

我们正在使用 bootstrapValidator 来验证我们所有的表单，但是在我们的登录表单上，如果用户按下enterorreturn并且一切都有效，则什么也不会发生。

这是我们正在使用的html：

<form id="signin" name="signin" class="validate-live" method="POST">
    <fieldset>
        <!-- Email -->
        <div class="form-group">
            <label class="control-label sr-only" for="email">Email</label>  
            <input id="email" name="email" type="email" placeholder="Email" 
                class="form-control"
                data-bv-notempty="true"
                data-bv-notempty-message="Please enter your email"
            >
        </div>

        <!-- Password -->
        <div class="form-group">
            <label class="control-label sr-only" for="password">Password</label>  
            <input id="password" name="password" type="password" placeholder="Password"
                class="form-control"
                data-bv-notempty="true"
                data-bv-notempty-message="Please enter your password"
            >
        </div>

        <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button>
        <a href="reset-password.php" class="btn btn-link-secondary btn-forgot" >Forgot password?</a>            
      </fieldset> 
    </form>

和 bootstrapValidator 代码：

$(document).ready(function() {
    $('.validate-live').bootstrapValidator({
        live: 'enabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: '#submit_button',
        trigger: null
    }).on('error.field.bv', function(e, data) {
        data.bv.disableSubmitButtons(true);
    }).on('success.field.bv', function(e, data) {
        data.bv.disableSubmitButtons(false);
        if (data.bv.getInvalidFields().length>0) {
            data.bv.disableSubmitButtons(true);
        }
    });
});

我在事件处理程序中添加了一些console.logs，它们显示验证器在按键时激活，如果表单无效，则会显示提示，但如果表单很好，直到用户实际单击#submit_button按钮后才会发生任何事情.

4

1 回答 1

1

没有看到任何分配的理由submitButtons: '#submit_button'

只需删除submitButtons: '#submit_button',即可解决问题。

JS

$(document).ready(function() {
  $('.validate-live').bootstrapValidator({
    live: 'enabled',
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    //submitButtons: '#submit_button',
    trigger: null
  }).on('error.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(true);
  }).on('success.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(false);
    if (data.bv.getInvalidFields().length > 0) {
      data.bv.disableSubmitButtons(true);
    }
  });
});

HTML

<form id="signin" name="signin" class="validate-live" method="POST">
  <fieldset>
    <!-- Email -->
    <div class="form-group">
      <label class="control-label sr-only" for="email">Email</label>
      <input id="email" name="email" type="email" placeholder="Email" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your email">
    </div>

    <!-- Password -->
    <div class="form-group">
      <label class="control-label sr-only" for="password">Password</label>
      <input id="password" name="password" type="password" placeholder="Password" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your password">
    </div>

    <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button>
    <a href="reset-password.php" class="btn btn-link-secondary btn-forgot">Forgot password?</a>
  </fieldset>
</form>

工作小提琴

于 2016-03-17T15:33:12.133 回答