jQuery表单提交

Question

我的目标是：

• 当表单提交时进行验证：通过
• 调用ajax以检查用户名和密码是否匹配：通过
• 如果不匹配，则显示错误：通过
• 如果匹配，则真正地提交表单：未通过。

问题实际上是，由于在表单上有一个jQuery提交事件，所以我无法提交表单！

function form1Submit() {
var username=$('#username').val();
var password=$('#password').val();
if (username.length<2) {
    return false;
}
if (password.length<2) {
    return false;
}
$.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
        alert('bad password');
        return false;
    } else {
    //to be done here !
    }
});
    return false;
}
function init() {
   $('#form1').submit(function(){
        return form1Submit();
    })
}
$(document).ready(function(){
    init();
})

- yarek

Answer 1

您可以调用本机提交事件，因此请执行以下操作：

$('#form1').submit(form1Submit);

然后在您的帖子回调中执行以下操作：

$.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
        alert('bad password');
    } else {
        this.submit();
    }
});

this.submit()并不是调用jQuery的.submit()触发函数，而是原生的<form> .submit()函数。

- Nick Craver

Answer 2

function form1Submit(ev, ok) {

  ev.stopPropagation();

  ok = (typeof ok != 'undefined') ? ok : false;

  if (ok)
    return true;

  var username=$('#username').val(),
      password=$('#password').val(),
      selfForm = this;

  if (username.length < 2)
    return false;

  if (password.length < 2)
    return false;

  $.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
      alert('bad password');
    } else {
      $(selfForm).trigger('submit', [true]); // again submit but with ok parameter
    }
  });

  return false;
}

function init() {
   $('#form1').bind('submit', form1Submit);
}

$(document).ready(function(){
    init();
})

- andres descalzo

---

$(selfForm).trigger('submit', [true]); 似乎能解决问题。只需将 selfform 替换为表单的 ID，一切都会准备妥当。例如：$('#frm_test').trigger('submit', [true]);。 - Devner

Answer 3

return false会阻止默认的表单提交操作。你需要从form1Submit()函数中要么返回true，以便让默认的表单提交操作正常工作，要么在else中添加另一个$.post()，以异步方式提交数据到表单，如果你的意图是使用ajax技术来完成它。

- BalusC

Answer 4

问题在于form1Submit总是返回false。

- A. M.

Answer 5

$(function() {

        $("#search_form").validate({
            rules: {
                class_id: {
                    required:true,
                },
                section_id: {
                    required:true,
                },
                period_id: {
                    required:true,
                },
            },
            messages:{
                class_id: {
                    required:'Class id is required',
                },
                section_id: {
                    required:'Section id is required',
                },
                period_id: {
                    required:'Month is required',
                }
            },
            submitHandler: function(form) {

               //Your ajax code
               return false;
           }
        });

    });

- Gaurav Maharwal