使用 jquery 3x 和 formvalidator.net 时没有出现验证错误

Question

我正在使用来自 formvalidator.net 的 Jquery 插件的最新版本 2.2x 以及 bootstrap 4.

jsfiddle : https://jsfiddle.net/adarshmadrecha/ckpLsqod

<body>
<script>
$.validate();
</script>

<div class="container mt-5">
<form>
  <div class="form-group">
    <label for="#txt01"> First Name </label>
    <input type="text" id="txt01" class="form-control" data-  validation="length alphanumeric" data-validation-length="min4">
  </div>

  <div class="form-group">
    <label for="#txt02"> Email </label>
    <input type="text" id="txt02" class="form-control" data-validation="email">
  </div>

  <div class="form-group">
    <input type="button" class="btn btn-info" value="Submit">
  </div>
</form>
</div>
</body>

我无法弄清楚我的 HTML / javascript 到底出了什么问题。我试过 Bootstrap 3 但这也没有用。

ps：这是我第一次创建 HTML 表单。

Answer 1

尝试使用以下代码，在你 fiddle 中添加这个 cdn 表单验证器 js https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js，找不到现有的，抛出 404.

<body>
  <script>
  function validateForm(){
    $.validate();
  }
  </script>

  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="#txt01"> First Name </label>
        <input type="text" id="txt01" class="form-control" data-validation="length alphanumeric" data-validation-length="min4">
      </div>

      <div class="form-group">
        <label for="#txt02"> Email </label>
        <input type="text" id="txt02" class="form-control" data-validation="email">
      </div>

      <div class="form-group">
        <input type="button" class="btn btn-info" value="Submit" onclick="validateForm();">
      </div>
    </form>
  </div>

</body>

Fiddle : https://jsfiddle.net/ckpLsqod/11/

使用 jquery 3x 和 formvalidator.net 时没有出现验证错误

No Validation errors showing up using jquery 3x with formvalidator.net

jquery

bootstrap-4

jquery-form-validator

jquery-3