仅当变量为 true 时才提交 AJAX 表单

Question

$(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));
      }
    });
    }
  });
});

所以我有上面的代码，我将在其中获取用户填写的字段的所有值，并且只有在所有内容都填写并验证后才将对象发送到 node.js 服务器。

这里的问题是，如果我有 isValid 检查，根本没有任何东西发送到服务器。

事实上，if 语句中根本没有发生任何操作，因为我尝试在其中放入一些 alert 并且根本没有显示任何内容。

Answer 1

尽量防止表单提交处理程序的默认行为：

$(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
}

但更好的选择是根本不使用表单，而是在一个简单的按钮上添加一个监听器