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
}

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

如果变量为true，则仅提交AJAX表单

2 个答案: