使用 AJAX 进行表单验证 - 防止出现空白字段答案

【问题标题】：Form validation with AJAX - preventing from blank fields使用 AJAX 进行表单验证 - 防止出现空白字段
【发布时间】：2015-03-18 20:01:44
【问题描述】：

我在 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!";
      },
    });
  });
});

【问题讨论】：

如果用户禁用 JS，请使用服务器端方法 empty()。 只要我的 2 美分 ;-)
为什么不直接使用又快又脏的required 属性呢？ jsfiddle.net/rcm0x0j3 - 我还将投票给 @Fred-ii- 以进行服务器端验证。
我尝试了这个属性，但是我应该怎么做才能添加例如验证码？我无法将此属性添加到内部带有验证码的 div。
@JayBlanchard 他们确实同意我的 ;-) 一定很喜欢 Plan-b，对吧Sam？
只要猛拉他们的角 Sam，你就有可能摆脱“公牛”@JayBlanchard

标签： javascript php jquery ajax validation

【解决方案1】：

您可以在不能为空的字段上使用 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
}

【讨论】：

submit value 是什么意思？
我的意思是提交按钮内显示的文本。不过没关系，谢谢你的回复。