Only allow to submit the form once all field is filled AJAX POST

Question

Only allow to submit the form once all field is filled AJAX POST

I'm trying to send some data from my AJAX form to my Node.js Server.

$(function () {
  $('#submit').click(function (e) {
    e.preventDefault() // prevents the form from being submitted
    var data = {};
    data.id = $("#id").val();
    data.title = $("#title").val();
    data.content = $("#content").val();
    data.author = $("#author").val();
    data.email = $("#email").val();

    $.ajax({
      type: 'POST',
      data: JSON.stringify(data),
      contentType: 'application/json',
      url: '/server',
      success: function (data) {
        console.log('success');
        console.log(JSON.stringify(data));
      }
    });
  });
});

The problem that I have is that I only want the form to be submit once all the fields are filled, but even I have put required on the input tag I still see message on my console that the process is successful.

How do I stop this? I only want the form to be submit with the value of all the fields.

jquery
ajax
forms
node.js

Answer 1

The required attribute applies to standard form submits, which you are bypassing with your JavaScript.

Given that your existing code gets each field individually the simplest change might be to just loop through the properties in the data object that you create:

for (k in data) {
   if ($.trim(data[k]) === "") {
      alert("All fields must be filled.");
      return false;
   }
}

Note that I've used the $.trim() function so that the user can't avoid your validation by entering space characters.