Question

我们正在使用bootstrapValidator来验证我们的所有表单，但是如果用户按输入或返回并且一切都有效，则在我们的登录表单上，没有任何反应。

这是我们正在使用的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，并且他们显示验证器在按键上激活，如果表单无效，则会显示提示，但如果表单为＆＃39 ;在用户实际点击#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忽略在完整表单上输入按键

1 个答案: