使用 formvalidation.io v0.8.1 验证表单

Question

我想使用 https://github.com/formvalidation/formvalidation.io v0.8.1 验证表单（jQuery 验证表单字段的插件，专为 Bootstrap 3/4 · Foundation 5/6 · Pure ·语义UI·UI套件·其他)

这是我的 HTML 页面：

 ....

    <!--  for the error login message box -->
    <link rel="stylesheet" media="screen" href="/tdk/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" /> 

<link rel="stylesheet" type="text/css" href="/tdk/css/formvalidation.css" />

    <body>

     <div class="container">

            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">

                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                        <p>Nombre de usuario o contraseña incorrecta&quot;</p>
                    </div>

                </div>
            </div>

            <div class="row">

                <div class="col-md-6 col-md-offset-3">

                    <div class="well">

                        <div class="text-center">

                            <h1>??login.h1.text_es_ES??</h1>
                            <p class="lead">??login.p.lead_es_ES??</p>

                        </div>

                        <div class="text-left">

                            <form id="loginForm" method="post" action="/tdk/login">

                                <div class="form-group">
                                    <label for="username">??login.username.text_es_ES??</label>
                                    <input type="text" id="username" name="username" class="form-control" />
                                </div>

                                <div class="form-group">
                                    <label for="password">??login.password.text_es_ES??</label>
                                    <input type="password" id="password" name="password" class="form-control" />
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">??navbar.login.text_es_ES??</button>
                                </div>

                            <input type="hidden" name="_csrf" value="ab14a342-9157-474f-9462-f56940812b6a" /></form>
                            <a href="/tdk/forgotmypassword">Ha olvidado su clave de acceso ?</a>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    <!-- Js zone -->
     <div>

            <script src="/tdk/webjars/jquery/3.2.0/jquery.min.js"></script>
            <!-- <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> -->

            <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"     type="text/javascript"></script> -->
            <script type="text/javascript" src="/tdk/tdk/js/jquery.floatThead.min.js"></script>
            <script src="/tdk/tdk/js/jquery.mCustomScrollbar.concat.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
            <!-- <script th:src="@{/js/ui.js}"  type="text/javascript"></script> -->

            <!-- <script th:src="@{/webjars/jquery/3.2.0/jquery.min.js}"></script> -->

        </div> 

    <script src="/tdk/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script> 
     <script src="tdk/js/formvalidation/tdk.js"></script>
    <script src="tdk/js/formvalidation/base.js"></script>
    <script src="tdk/js/formvalidation/bootstrap.js"></script>

    ...


and my tdk.js



      /* Login page form validation */
        $('#loginForm').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        }
                    }
                }
            }
        });

但是客户端没有验证

Answer 1

我认为你必须将验证器放在 document.ready 函数中，这样你才能初始化验证器试试这个

$( document ).ready(function() {
/* Login page form validation */
        $('#loginForm').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        }
                    }
                }
            }
        });
});

使用 formvalidation.io v0.8.1 验证表单

Validating form with formvalidation.io v0.8.1

html

javascript

bootstrap-modal

formvalidation.io