使用AJAX進行表單驗證-防止出現空白字段

Question

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

Answer 1

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

<input type="text" required/>

AND / OR

提交前進行一些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!";
        },
      });
    }
  });
});

AND / OR

您需要進行服務器端檢查，以確保PHP中的值不為空：

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