当表单无效时，字段验证错误地启用

Question

下图显示了带有正确验证字段的注册表单。其他字段尚未完成，但代码以某种方式过早地启用了响应点击事件的提交按钮。我正在使用 formvalidation.io

我想知道是否有人可以在下面粘贴的示例代码中看到问题出在哪里。非常感谢凯文

 <script src="/formval/dist/js/formValidation.min.js"></script>
 <script src="/formval/dist/js/framework/bootstrap.min.js"></script>
 <div class="container">
 <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
        <div class="account-wall">
            <img class="profile-img" src="images/cl.png"
                alt="">
            <form id="regid" class="form-group">
            <div class = "form-group" > <input type="text" class="form-control" placeholder="Company name" id="cn" > </div>
            <div class = "form-group"> <input type="text" class="form-control" placeholder="User name" id="un" name="un" > </div>
            <div class = "form-group"> <input type="email" class="form-control" placeholder="Email" id="em" name="em" > </div>
            <div class = "form-group"> <input type="password" class="form-control" placeholder="Password" id="pw" name="pw" > </div>
            <div class = "form-group"> <input type="password" class="form-control" placeholder="Password repeat" id="pwr" name="pwr" > </div>
            <div class = "form-group">
            <button class="btn btn-lg btn-primary btn-block btn-primary" type="submit" id="submit" disabled >Register</button>
            </div>
            </form>
            </div>
    </div>
</div>
</div>
<script>
$(document).ready(function() {


$('#regid').formValidation({
   framework:'bootstrap',
   icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cn: {    },
            un: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    },
                    blank: {}
                }
            },
            em: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                                                                                                                                          },
            emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    blank: {}
                }
            },
            pw: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    stringLength: {
                        min: 8,
                        max: 30,
                        message: 'The password must be between 8 and 30 characters long'
                    },

                    //blank: {}
                }

            },
            pwr: {
                validators: {
                    notEmpty: {
                        message: 'The repeat password is required'
                    },
                    stringLength: {
                        min: 8,
                        max: 30,
                        message: 'The password must be between 8 and 30 characters long'
                    },
                    //blank: {}
                }
            } 
       }
     }).on('success.form.fv', function(e) {
        e.preventDefault();
        console.log('submit');            
      });

Answer 1

我认为您想禁用提交按钮，直到所有字段都有效，然后再启用它。

为此，触发 success.field.fv 事件并检查是否至少有一个字段尚未验证或正在验证，并使用 disableSubmitButtons 方法禁用提交按钮，请参阅以下代码：

$(document).ready(function() {
    $('#regid').formValidation({
        // ...
    })
    // <===
    .on('success.field.fv', function (e, data) {
        // Check if there is at least one field which is not validated yet
        // or being validated
        if (data.fv.isValid() === null) {
            data.fv.disableSubmitButtons(true);
        }
    })
    // ===>
    .on('success.form.fv', function(e) {
        e.preventDefault();
        console.log('submit');            
    });
});

# 工作示例： http://jsfiddle.net/Arkni/f0m15rqq/

#参考文献：

disableSubmitButtons 文档：http://formvalidation.io/api/#disable-submit-buttons
isValid 文档：http://formvalidation.io/api/#is-valid

`

当表单无效时，字段验证错误地启用

field validation incorrectly enables when form is invalid

twitter-bootstrap

formvalidation-plugin