jQuery 表单提交

Question

我的目标是： 何时提交：

• 对表格进行验证：OK
• 调用 ajax 以查看用户名和密码是否匹配：OK
• 如果不匹配，显示错误：OK
• 如果他们匹配，那么真的提交表格：不OK.

事实上，问题是，我无法提交表单，因为上面有一个 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();
})

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()

函数。

Answer 2

return false

阻止默认表单提交操作。你有或者到

return true

从

form1Submit()

函数让默认表单提交操作完成它的工作，or在

$.post()

里面添加另一个

else

异步提交数据到表单，如果你的意图是使用ajaxical powers来做到这一点。

Answer 3

问题是 form1Submit 总是返回 false。

Answer 4

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

Answer 5

$（函数（）{

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

});