jQuery 验证不验证我的 textarea 元素

Question

我目前正在使用 jQuery 验证来验证我的字段。我有两个领域， 命名为“cmets”和“帐户名称”。这两个字段具有相同的规则方法，其中 required 为 true。当我单击“保存”按钮时，仅验证了帐户名称。为什么呢？这是我的问题和代码的屏幕截图

$(document).ready(function() {
  $.validator.setDefaults({
    errorClass: 'help-block',
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');

    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        .removeClass('has-error')
        .addClass('has-success');
    },
  });

  $('#dataForm').validate({
    rules: {
      commentInput: {
        required: true
      },
      accountNameInput: {
        required: true
      }
    },
    submitHandler: function(form) {
      alert('success');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">

  <div class="form-group">
    <label class="control-label" for="commentInput">Comments</label>
    <textarea class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
  </div>

  <div class="form-group">
    <label class="control-label" for="accountNameInput">Account name</label>
    <input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
  </div>


  <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

</form>

Answer 1

您必须为所有需要验证的表单字段提供name 属性。这就是验证插件从中获取元素引用的地方。

来自documentation：

在整个文档中，经常使用两个术语，所以它是 重要的是您知道它们在验证上下文中的含义 插件：

方法：验证方法实现验证元素的逻辑，例如检查邮件格式是否正确的电子邮件方法 文本输入的值。有一套标准方法可用，它是 很容易自己写。

rule：验证规则将元素与验证方法相关联，例如“使用 name 验证输入”“primary-mail”与 方法“必需”和“电子邮件”。

name 属性也必须出现在任何需要在表单提交过程中传输其数据的表单字段中。

$(function() {
  $.validator.setDefaults({
    errorClass: 'help-block',
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        .removeClass('has-error')
        .addClass('has-success');
    },
  });

  $('#dataForm').validate({
    rules: {
      commentInput: {
        required: true
      },
      accountNameInput: {
        required: true
      }
    },
    submitHandler: function(form) {
      alert('success');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">

  <div class="form-group">
    <label class="control-label" for="commentInput">Comments</label>
    <textarea class="commentInput" id="commentInput" name="commentInput" cols="20" rows="5"></textarea>
  </div>

  <div class="form-group">
    <label class="control-label" for="accountNameInput">Account name</label>
    <input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
  </div>


  <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

</form>

Answer 2

验证插件的目标是 name 属性：

<textarea id="commentInput" name="commentInput" cols="20" rows="5"></textarea>

Answer 3

您需要使用 name 属性进行验证。

$(document).ready(function() {
  $.validator.setDefaults({
    errorClass: 'help-block',
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');

    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        .removeClass('has-error')
        .addClass('has-success');
    },
  });

  $('#dataForm').validate({
    rules: {
      commentInput: {
        required: true
      },
      accountNameInput: {
        required: true
      }
    },
    submitHandler: function(form) {
      alert('success');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">

  <div class="form-group">
    <label class="control-label" for="commentInput">Comments</label>
    <textarea name="commentInput" class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
  </div>

  <div class="form-group">
    <label class="control-label" for="accountNameInput">Account name</label>
    <input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
  </div>


  <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

</form>