Only submit AJAX form if the variable is true

Question

Only submit AJAX form if the variable is true

$(function () {
  $('#submit').submit(function() {

    var isValid = document.getElementById("form-setting").checkValidity();

    var data = {};
    data.id = $("#id").val();
    data.title = $("#title").val();
    data.content = $("#content").val();
    data.author = $("#author").val();
    data.email = $("#email").val();

    if (isValid) {

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

So I have the above code where I will get all the value of the field that filled by the user, and only send the object to the node.js server if everything is filled and validated.

The problem here is that if I have that isValid check there is nothing being sent to the server at all.

In fact there is no action happens inside that if statement at all because I tried put some alert in there and nothing is showing at all.

jquery
ajax
node.js

Answer 1

Try to prevent default behaviour of your form's submit handler:

$(function () {
    $('#submit').submit(function (e) {

        var isValid = document.getElementById("form-setting").checkValidity();
        alert(isValid); //<<< ALERT HERE
        var data = {};
        data.id = $("#id").val();
        data.title = $("#title").val();
        data.content = $("#content").val();
        data.author = $("#author").val();
        data.email = $("#email").val();

        if (isValid) {
            alert('PASS'); //<<< ALERT HERE
            $.ajax({
                context: this, //use for success callback
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json',
                url: '/admin/setting',
                success: function (data) {
                    console.log('success');
                    console.log(JSON.stringify(data));
                    //this.submit();  //uncomment this line if you want to submit form
                }
            });
        }
        e.preventDefault();
    });

});

Answer 2

if (isValid) {
  // send your ajax call
  return false; // plus don't want your form being submited since you allready submited it through ajax 
}
else{
  return false; // since you want to prevent the submission
}

But a better option would be to not use form at all, and add a listener on a simple button