AJAX表单验证-防止空白字段 - Form validation with AJAX - preventing from blank fields

Form validation with AJAX - preventing from blank fields

本文关键字：空白字段表单验证 AJAX | 更新日期: 2023-09-27

我在JS中有一些脚本，它应该验证我的表单。它在处理时显示诸如"已发送"或"正在加载"之类的信息。我想再添加一个功能。我希望防止用户发送带有空白字段的电子邮件。为了实现这一点，我应该在下面的代码中添加什么？

$(function() {
  var form = $('#form');
  var submit = $('#submit');
  form.on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      url: '',
      type: 'POST',
      dataType: 'html',
      data: form.serialize(),
      beforeSend: function() {
      document.getElementById("submit").value = "Loading...";
      },
      success: function() {
      form.trigger('reset');
      document.getElementById("submit").value = "Message sent!";
      },
    });
  });
});

您可以在不能为空的字段上使用HTML属性required

<input type="text" required/>

与/或

在提交之前进行一些javascript检查

$(function() {
  var form = $('#form');
  var submit = $('#submit');
  form.on('submit', function(e) {
    e.preventDefault();
    if($('input', this).val().trim() == ''){
       //handle error message
    }
    else{
      $.ajax({
        url: '',
        type: 'POST',
        dataType: 'html',
        data: form.serialize(),
        beforeSend: function() {
        document.getElementById("submit").value = "Loading...";
        },
        success: function() {
        form.trigger('reset');
        document.getElementById("submit").value = "Message sent!";
        },
      });
    }
  });
});

与/或

您进行服务器端检查以确保该值不为空在PHP中：

if(empty($_POST['input_name'])){
   //handle error
}