jQuery如何对input、textarea等表单元素做空值和空白字符校验

1. 字符串方法调用错误：代码中inputs[i].value.trim是直接获取trim函数本身，没有添加()执行，无法得到去除首尾空白后的字符串，判断条件永远不触发，是校验失效的核心原因。
2. 未筛选必填字段：form.serializeArray()只能拿到表单所有带name属性的字段值，无法区分字段是否带有required属性，和你注释中“仅校验必填字段”的逻辑不符。
3. 空值判断逻辑冗余：字符串执行trim()后只会返回字符串类型，不可能为null，inputs[i].value.trim == null的判断完全无效。
4. HTML标签属性缺失：你提供的表单中<textarea>没有添加required属性，就算校验逻辑正常，这个字段默认也不会被当做必填项校验。

校验逻辑 #

if (!checkform($('#myform'))) {
  alert("Please fill all required fields");
} else {
  // 后续业务逻辑
}

function checkform(form) {
  // 直接筛选表单内所有带required属性的输入类元素，覆盖input、textarea、select等场景
  const requiredFields = form.find('input[required], textarea[required], select[required]');
  for (let i = 0; i < requiredFields.length; i++) {
    // 取值后执行trim去除首尾空白
    const fieldValue = $(requiredFields[i]).val().trim();
    if (fieldValue === '') {
      // 匹配到空值/全空白值，校验不通过
      return false;
    }
  }
  return true;
}

修正后的表单HTML（补充textarea的required属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="myform">
  <label class="form-label">Firstname</label>
  <input type="text" name="firstname" class="form-control" id="firstname" required>
  <label class="form-label">Message</label>
  <!-- 补充required属性 -->
  <textarea id="message" rows="3" name="message" placeholder="enter your message" required> 
     </textarea>
</form>

内容的提问来源于stack exchange，提问作者Mashiba Sakuto