1000hz引導程序驗證器data-toggle =“ validator”不起作用

Question

我正在嘗試使用以下驗證器http://1000hz.github.io/bootstrap-validator/驗證以下表單，我從驗證器插件的文檔中復制了大多數元素，並且當我按下“提交”按鈕時，它總是通過我沒有添加錯誤，我添加了“ data-toggle =“ validator”，它說它應該自動validateit。並且我也嘗試使用底部的腳本。請向我展示一個示例如何使用它。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
   <body>
         <script src="js/bootstrap.min.js"></script>
         <script src="dist/js/bootstrap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
         <h1>Register Below! </h1>

      <form data-toggle="validator" role="form" method="post" class="form-horizontal" name="myForm">
            <div class="form-group">
              <label for="inputName" class="col-md-3 control-label">Name</label>
            <div class="col-md-6">
             <input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
           </div>
          </div>


           <div class="form-group">
            <label for="inputEmail" class="col-md-3 control-label">Email</label>
           <div class="col-md-6">
            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
           <div class="help-block with-errors"></div>
          </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-md-3 control-label">Password</label>
          <div class="form-group col-sm-6">
            <input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
          <span class="help-block">Minimum of 6 characters</span>
          </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
          <div class="form-group col-sm-6">
            <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
          <div class="help-block with-errors"></div>
         </div>
        </div>
        <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
          <button type="submit" name="submit" class="btn btn-primary">Register</button>
       </div>
    </div>
   </form>

        <script >
          (document).ready(function() {
           $('#myForm').validator()
             $('#myForm').submit(function (e) {
                 $('#myForm').validator('validate')
              });
           });

         </script>
    </body>
</html>

Answer 1

您的方法中有幾個錯誤

不包含jQuery庫（必須包含在所有其他JS庫之上）
bootstrap.min.js包含兩次（刪除一個）
腳本中的(document).ready(function()之前缺少$
<form>缺少id選擇器myForm

休息一下代碼沒錯

注意：可以使用data-toggle="validator"屬性來完成驗證，也可以通過JS腳本$('#myForm').validator()在表單上進行初始化，而無需兩者都進行。

擺弄data-toggle =“ validator”

用JS腳本擺弄

1000hz引導程序驗證器data-toggle =“ validator”不起作用

問題描述

1 個解決方案

解決方案1
4 已采納 2016-02-09 16:54:52

1000hz引導程序驗證器data-toggle =“ validator”不起作用

問題描述

1 個解決方案

解決方案1 4 已采納 2016-02-09 16:54:52

解決方案1
4 已采納 2016-02-09 16:54:52