Question

我正在尝试使用Jquery AJjax将表单值插入数据库，并且我有以下脚本将数据发送到我的控制器，它运行正常。我正在使用jquery验证插件来验证我的表单。现在问题是当我提交表单按钮时，即使存在一些验证错误（我的验证插件显示），表单值也会发送到数据库。但我希望只有在没有验证错误的情况下才能发送它们。

提交表单后，值仍保留在表单中。

请你告诉我我做错了什么。

仅供您参考我使用Codeigniter。

<script  type="text/javascript">
  $(document).ready(function(){ // added
 $('#submit_item').click(function(){

    var teacherid = $('#teacherid').val();  
    var salary_amount = $('#salary_amount').val(); 



$.ajax({

   type: "POST",
   url: "<?php echo base_url(); ?>addteacher_salary/add_ajax",
   data: "teacherid="+teacherid+ "&salary_amount="+ salary_amount,
   success: function(html){
    $("#show").html(html);


       }
});

return false
});
}); // added
</script>

Answer 1

我不确定我是否完全理解您希望这样做的方式，但另一种方法是使用submitHandler选项，如documentation中所述：

在表单有效时回调处理实际提交。获取形式作为唯一的论点。替换默认提交。正确的在验证后通过Ajax提交表单。

$(".selector").validate({
   submitHandler: function(form) {
     $(form).ajaxSubmit();
   }
})

作为一个头脑：我相信$(form).ajaxSubmit();正在使用jQuery表单插件。如果您没有或不想使用它，您可以将当前的ajax提交放在那里。

旁注：

data的{{1}}参数可以是对象文字，因此您不必担心自己添加问号和＆符号。你可以这样做：

$.ajax

Answer 2

这里发生的不是提交表单，而是表示您从表单中获取所有值并在不提交表单的情况下发布表单，并且完全没有验证您正在检索的值。

您的验证插件可能有一个函数，您可以在继续提交AJAX帖子之前手动调用以检查表单是否有效。

如果您使用的是this plugin，则可能需要查看函数valid()

if(!$('#my-form').valid())
    return false;

$.ajax({ ... });

......或form()。但是有很多验证器插件，所以我不确定这是你所指的。无论如何，你想要做的是在提交AJAX帖子之前手动触发验证。

Jquery Post发送表单值，尽管有验证错误

2 个答案:

旁注：