BootstrapValidator 忽略完整表单上的 Enter 按键

Question

我们正在使用 bootstrapValidator 来验证我们所有的表单，但是在我们的登录表单上，如果用户按下 enter 或 return 一切都有效，没有任何反应。

这是我们正在使用的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 按钮。

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

Working Fiddle

BootstrapValidator 忽略完整表单上的 Enter 按键

BootstrapValidator ignoring Enter keypress on complete form

jquery

validation

bootstrapvalidator