表单required属性未生效，疑受JavaScript影响求解决方案

没错，问题就出在你写的JavaScript代码上，还有一个容易忽略的小细节——缺少<form>标签，这俩加起来就让浏览器的原生required校验彻底罢工了。我给你拆解一下原因和修复方案：

为什么校验不生效？ #

1. 没有<form>容器：浏览器的原生表单校验（包括required属性）只对<form>标签内部的表单元素生效，你现在的input和button直接放在表格里，浏览器根本不知道这是一个需要校验的表单。
2. click事件绕过了原生校验流程：你给submit按钮绑定了click事件，点击时会直接执行你的自定义逻辑，但浏览器的原生校验是在表单的submit事件触发时才会触发的，你的click事件相当于跳过了这个关键步骤。

修复方案（附完整代码） #

我帮你调整了代码，核心改动有两个：给表单加上<form>容器，把按钮的click事件换成表单的submit事件监听，这样就能让原生校验先执行，通过后再跑你的自定义逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 新增form标签包裹表单元素 -->
<form id="myForm">
  <tr>
    <td>
      <input type="text" size="30" placeholder="Text " maxlength="10" id="source" required>
      <button type="submit" class="formButton" id="submit">Submit</button>
    </td>
  </tr>
</form>
<tr>
  <td height="20px"></td>
</tr>
<tr>
  <td>
    <input type="text" style="border:none" size="40" id="target" class="form69" onClick="myFunct()">
  </td>
</tr>
<tr>
  <td height="150px"></td>
</tr>
<script>
  $(".formButton").click(function() {
    $(".form69").show();
  });
</script>
<script>
  // 监听表单的submit事件，而不是按钮的click事件
  $('#myForm').submit(function(event) {
    // 浏览器会先自动执行required校验，只有通过才会进到这里
    var source = $('#source').val();
    $('#target').val('text test' + source + ' text');
    
    // 如果不需要表单真的提交到服务器，阻止默认提交行为
    event.preventDefault();
  });
</script>

改动说明： #

• 新增的<form id="myForm">让浏览器识别这是一个需要校验的表单，required属性终于能发挥作用了。
• 把$('#submit').click(...)改成$('#myForm').submit(...)：点击submit按钮时，浏览器会先触发表单的submit事件，自动检查所有带required的元素，只有校验通过后才会执行你的自定义代码。
• event.preventDefault()：如果你的表单不需要提交到后端服务器（只是想做前端逻辑处理），加上这行可以阻止浏览器默认的页面跳转/刷新行为。

现在你测试一下：当source输入框为空时点击Submit，浏览器会弹出原生的校验提示，只有输入内容后，才会执行修改target值的逻辑，完美解决问题！

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