这个问题我之前也碰到过，核心原因是你直接绑定按钮的click事件时，会绕过浏览器的原生表单验证流程。当你移除按钮ID后，按钮默认属于submit类型（在表单内未指定type时的默认值），所以浏览器会自动触发required验证；但加了ID绑定click事件后，代码直接执行AJAX，跳过了验证步骤。

下面给你两种可行的解决方案：

方案一：监听表单submit事件（推荐） #

这种方式会让浏览器先完成原生验证，验证通过后再执行AJAX提交，是最符合规范的做法。

修改按钮代码 #

给按钮加上type="submit"属性：

<div class="modal-footer"> 
  <button type="submit" class="btn btn-primary py-1" style="font-size: 14px" id="btnguardar">Guardar datos</button> 
  <button type="button" class="btn btn-secondary py-1" style="font-size: 14px" data-dismiss="modal">Cancelar</button> 
</div>

修改AJAX代码 #

监听表单的submit事件，同时阻止默认的表单提交行为：

$(document).ready(function(){
  $('#frmpsb').submit(function(e){
    // 阻止浏览器默认的表单提交
    e.preventDefault();
    
    // 此时浏览器已经完成了required验证，只有验证通过才会走到这里
    var datos = $(this).serialize();
    $.ajax({
      type:"POST",
      url:"insertar.php",
      data:datos,
      success:function(r){
        if(r==1){
          // 这里可以添加提交成功后的逻辑，比如关闭模态框、提示成功等
        }else{
          alert('Fallo al enviar la peticion.');
        }
      }
    });
  });
});

方案二：手动触发表单验证（如果坚持用click事件） #

如果不想改表单的submit监听，也可以在按钮的click事件里手动触发验证：

$(document).ready(function(){
  $('#btnguardar').click(function(){
    var form = $('#frmpsb')[0];
    // 手动检查表单是否符合验证规则
    if(form.checkValidity()){
      var datos = $('#frmpsb').serialize();
      $.ajax({
        type:"POST",
        url:"insertar.php",
        data:datos,
        success:function(r){
          if(r==1){
            // 成功逻辑
          }else{
            alert('Fallo al enviar la peticion.');
          }
        }
      });
    } else {
      // 触发浏览器的原生错误提示
      form.reportValidity();
    }
  });
});

这样两种方式都能同时保留按钮ID用于AJAX绑定，又让required属性的原生验证生效。

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