我可以以某种方式使用 JQuery 设置一些 HTML5 验证吗？答案

【问题标题】：Can I Set Some HTML5 Validation With JQuery In A Certain Way?我可以以某种方式使用 JQuery 设置一些 HTML5 验证吗？
【发布时间】：2020-09-22 11:24:05
【问题描述】：

所以我的表单中有一个textarea，它有一个minlength="15" 和maxlength="2000"。但这意味着当用户达到 2000 个字符时，他就不能再打字了。我想要的是用户能够输入更多字符，但在提交时使用客户端验证来检查 textarea 值是否有效。如果不是，我想让它无效，并显示默认的 HTML5 验证气泡。到目前为止，这是我的代码：

textarea {
  min-height: 100px;
  min-width: 250px;
}

#charLeft {
  color: red;
}

<!DOCTYPE HTML>
<html lang="en-us">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <form action="" method="POST">
    <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" maxlength="2000" required></textarea>

    <div id="charLeft">0/15</div>
    <br />
    <input type="submit" />
  </form>

  <script type="text/javascript">
    function countChar(val) {
      let length = val.value.length;

      if (length > 15 && length < 2000) {
        $('#charLeft').html(length + '/2000');
        $('#charLeft').css('color', '#27ae60');
      } else if (length < 15) {
        $('#charLeft').html(length + '/15');
        $('#charLeft').css('color', '#e74c3c');
      } else {
        $('#charLeft').html(length + '/2000');
        $('#charLeft').css('color', '#e74c3c');
      }
    }
  </script>
</body>

如上所示，如果达到 2000 个字符的限制，textarea 将不再允许。我希望它超过 2000 个字符，但是当您提交时，如果超过 2000 个字符，请将其标记为无效。我不知道该怎么做，所以我需要一些帮助。我可以接受纯 JavaScript 或 JQuery。提前致谢，感谢您的帮助！

【问题讨论】：

标签： javascript html jquery css validation

【解决方案1】：

在 HTML 中，删除 maxlength 属性。这将允许用户输入超过 2000 个字符。在 JS 中，添加一个检查的提交处理程序，如下所示：

function countChar(val) {
  let length = val.value.length;

  if (length > 15 && length < 2000) {
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#27ae60');
  } else if (length < 15) {
    $('#charLeft').html(length + '/15');
    $('#charLeft').css('color', '#e74c3c');
  } else {
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#e74c3c');
  }
}

$("form").submit((e) => {

  var val = $("#describeIssue").val();
  if (parseInt(val.length) > 2000) {
    e.preventDefault();
    alert("To Long!");
  } else {
    //the user passed the lenghth
  }
});

textarea {
  min-height: 100px;
  min-width: 250px;
}

#charLeft {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<form action="" method="POST">
  <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" required></textarea>

  <div id="charLeft">0/15</div>
  <br />
  <input type="submit" />
</form>

此代码允许用户输入超过 2000 个字符，但如果输入有问题（超出长度），他们将无法提交输入。

【讨论】：

谢谢！这里唯一的问题是我想找到一种方法来看看你是否可以告诉表单这个textarea 是无效的，因此它会执行正常的invalid 运算符。如果不可能，请不要担心。我还是会接受这个答案！
这里有一个链接可以帮助解决这个问题：here@JasonD'Silva

【解决方案2】：

您可以允许用户输入超过 2000 个字符，然后返回自定义错误消息，但您不能这样做并显示默认的 HTML5 错误。实现前者，移除maxlength="2000"，在表单中添加onsubmit监听器，在监听器中检查文本长度是否超过2000个字符，然后决定是否提交表单。

function countChar(val) {
  let length = val.value.length;

  if (length > 15 && length < 2000) {
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#27ae60');
  } else if (length < 15) {
    $('#charLeft').html(length + '/15');
    $('#charLeft').css('color', '#e74c3c');
  } else {
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#e74c3c');
  }
}

$('#describeIssue').on('submit', function(event) {
  if ($('#describeIssue').value.length > 2000) {
    event.preventDefault();
  }
});

textarea {
  min-height: 100px;
  min-width: 250px;
}

#charLeft {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST">
  <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" required></textarea>

  <div id="charLeft">0/15</div>
  <br />
  <input type="submit" />
</form>

【讨论】：