Live Demo

Question

我正在尝试在调用ajax时禁用默认表单操作。但目前下面的代码没有发生。
任何人都可以帮助我在提交表单时如何防止默认表单操作调用。

//--------add project action ajax call start-------------  
$("#add_project_id").keypress(function (event) {
    event.preventDefault();
    if (e.which == 13) { //pressed enter after endering in textbox  
        //--bootstrap validation----
        e.preventDefault();
        $("#add_project_id").validate({
            rules: {
                projectName: {
                    required: true
                }
            },
            tooltip_options: {
                projectName: {
                    placement: 'left',
                    html: true
                }
            }
        },
        submitHandler: function (form) {
            $('#loadingimgid').css('display', 'block');
            $.ajax({
                type: 'POST',
                data: $('#project-formid').serialize(),
                dataType: "json",
                success: function () {
                    alert("success");
                    $('#loadingimgid').css('display', 'none');
                }
            }); // <- end '.ajax()'

        }
        });
}
}); //]]>

Html表单

 <form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="delete_existing_routine" id="project-formid">  
                  <input id="add_project_id" name="projectName" type="text" style="width: 70%;" required/> 
</form>

Answer 1

我认为您不需要绑定keypress或submit事件。您的验证提交处理程序会自动阻止表单提交。 Validate

如果您使用form.submit()来提交

，请使用此代码

$(".selector").validate({
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  }
});

以下

$(".selector").validate({
  submitHandler: function(form) {
    // do other things for a valid form
    //ajax request 
  }
});

如何防止在ajax调用上提交默认表单

1 个答案:

Live Demo