jQuery 验证没有验证我的 textarea 元素

Question

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

$(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:

Throughout the documentation, two terms are used very often, so it's important that you know their meaning in the context of the validation plugin:

method: A validation method implements the logic to validate an element, like an email method that checks for the right format of a text input's value. A set of standard methods is available, and it is easy to write your own.

rule: A validation rule associates an element with a validation method, like "validate input with name "primary-mail" with methods "required" and "email".

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

验证插件以名称属性为目标：

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

Answer 3

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

$(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>

jQuery 验证没有验证我的 textarea 元素

jQuery validation does not validate my textarea element

javascript

jquery

jquery-validate

twitter-bootstrap