使用JustValidateJs时表单仍可空提交/超限制提交，虽显示错误

问题根源分析 #

你的代码核心问题出在onSuccess回调里的手动提交逻辑——JustValidate本身会在验证通过后自动处理表单提交，而你手动调用$('#add_comment_form').submit()会绕过验证拦截逻辑；同时字符限制规则与textarea的maxlength属性不统一，也会导致验证逻辑冲突。

具体修复步骤 #

1. 移除多余的手动提交代码

删除onSuccess回调中的所有代码，让JustValidate默认处理验证通过后的提交行为：

const validateComment = new JustValidate('#add_comment_form');

validateComment
  .addField('#comment_content', [
    {
      rule: 'required',
      errorMessage: 'Field cannot be empty',
    },
    {
      rule: 'maxLength',
      value: 500,
      errorMessage: 'Comment cannot exceed 500 characters',
    }
  ]);

2. 统一字符限制规则

将textarea的maxlength属性与验证规则的maxLength值保持一致，避免浏览器原生限制与验证规则冲突：

<textarea id="comment_content" name="comment_content" class="form-control" placeholder="Enter comment" maxlength="500" rows="5"></textarea>

3. 确保库文件正确引入

检查HTML中是否正确引入了JustValidate的样式和脚本文件（使用稳定版本避免兼容问题）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/just-validate@4.2.0/dist/css/justValidate.min.css">
<script src="https://cdn.jsdelivr.net/npm/just-validate@4.2.0/dist/js/justValidate.min.js"></script>

4. 可选：手动拦截提交（兜底方案）

如果上述步骤后仍有问题，可添加表单提交事件监听，强制验证通过才允许提交：

document.getElementById('add_comment_form').addEventListener('submit', function(e) {
  if (!validateComment.isValid()) {
    e.preventDefault();
  }
});

最终完整代码示例 #

HTML部分：

<form action="addComment.php" method="post" id="add_comment_form" class="w-50">
  <div>
    <label for="comment_content">Comment as <?php echo $commentWriter ?></label>
    <textarea id="comment_content" name="comment_content" class="form-control" placeholder="Enter comment" maxlength="500" rows="5"></textarea>
  </div>
  <div class="row justify-content-end mt-3">
    <div class="col-auto">
      <button type="submit" class="btn btn-primary" id="addCommentBtn">Save changes</button>
    </div>
  </div>
</form>

<!-- 依赖库引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/just-validate@4.2.0/dist/css/justValidate.min.css">
<script src="https://cdn.jsdelivr.net/npm/just-validate@4.2.0/dist/js/justValidate.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

JS部分：

const validateComment = new JustValidate('#add_comment_form');

validateComment
  .addField('#comment_content', [
    {
      rule: 'required',
      errorMessage: 'Field cannot be empty',
    },
    {
      rule: 'maxLength',
      value: 500,
      errorMessage: 'Comment cannot exceed 500 characters',
    }
  ]);

修改后，空表单或超字符限制时会显示错误提示并阻止提交；验证通过时表单会自动提交到目标接口。

内容的提问来源于stack exchange，提问作者Koenig One