Question

我目前正在使用jQuery验证来验证我的字段。我有两个领域，命名＆＃34; 评论＆＃34; ＆安培; ＆＃34; 帐户名称＆＃34;。两个字段都具有相同的规则方法，其中 required为true 。当我点击＆＃34;保存＆＃34;按钮，仅验证帐户名称。为什么会这样？这是我的问题和我的代码的截图

＆＃13;

$(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');
    }
  });
});

＆＃13;

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

＆＃13;

Answer 1

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

来自 documentation ：

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

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

规则：验证规则将元素与验证方法相关联，例如“使用名称验证输入”主要邮件“   方法“必需”和“电子邮件”。

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>

jQuery验证不验证我的textarea元素

3 个答案: