PHP email 表单字段验证与 jQuery 在同一页面上处理

Question

我对下面的 jQuery 代码有疑问。 我有一个 PHP jQuery email 表单提交时保持在同一页面上，我正在尝试向各种输入字段添加验证以确保它们是必需的。但是我的代码不错误在 jQuery 部分“//验证和处理”中。

提交时，我返回 alert('Errors'); 该字段是否已填充。

如果我将表单提交按钮从 div 按钮更改为 input type="submit"，我会在正确的字段上收到一个必需的警报，但是我使用的是 div，因为我需要在提交表单时保持在同一页面上。

以下是我的部分代码的示例。 我的代码非常广泛，因此我将其剥离以使其更易于阅读。

希望这是有道理的。 任何建议，将不胜感激。 谢谢你。

jQuery：

function sendSupplierForm() {

   let values = [];
        
      $(".service-row-items").each(function() {
          const checkboxtitle = $(this).find('input[name="servicelist[]"]');
          if (!checkboxtitle.is(":checked")) {
          return;
      }
    
      $(this).find("span").each(function(){
          const label = $(this).find('label');
          const input = $(this).find('input[type="text"]');
          if (input.val()) {
          values.push(label.html(), input.val());
          }
      }); 
      })
        
      var data = {
            servicelist: values,
        };

   // Validate & Process
   if ($('#deliveryinfo').hasClass('valid')) {
            
      alert('No errors');
                
      jQuery.ajax({
      url: "supplier-email.php",
      data: data,
      dataType:'text',
      type: "POST",
      });

   } else {
      alert('Errors');
      return false;
   }

}

PHP：

echo '<form id="SupplierForm">';
echo '<input type="checkbox" id="servicetitle" class="serviceselect" name="servicelist[]" value=""><p class="sup-product-item-name">Service 1</p>';
echo '<label>Delivery Info: </label>';
echo '<input type="text" id="deliveryinfo" name="servicelistinput[]" value="" required="required">';
echo '<div name="submit" id="action" class="button btnAction" onClick="sendSupplierForm();">Send Email to Supplier</div>';
echo '</form>';