jQuery验证+通过$.post提交

Question

你好！

我的问题如下：

验证插件对我来说很好用，但是当表单还没有通过验证时，我不想让它提交。

事实上，它会验证并显示错误，但即使它不合法，它也会提交。

---

验证

$("form#form-utilizadores").validate({
  rules:{
    nome:{
      required:true
    },
    utilizador:{
      required:true
    },
    password:{
      required:true
    },
    tipo:{
      required:true
    }
  }
});

---

提交

$('form#form-utilizadores').submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    $.post('submit/submit-utilizadores.php',data,function(data){
      alert((data=='sucesso') ? 'Adicionado com sucesso!' : data);
      top.location.reload();
    }
  );
});

---

感谢您花时间帮助我！:)

---

- silentw

---

你是否在分配form.validate()之前分配form.submit()？ - Salman A

Answer 1

你应该将你的代码放在 $('form#form-utilizadores').submit() 中，并将其放入 jQuery 验证设置的 submitHandler 参数中，尝试这样做：

$("form#form-utilizadores").validate({
    rules: {
        // your current rules...
    },
    submitHandler: function(form) {
        var data = $(form).serialize();
        $.post(    
            'submit/submit-utilizadores.php',
            data,
            function(data) {
                alert((data=='sucesso') ? 'Adicionado com sucesso!' : data);
                top.location.reload();
            }
        );
    }
});

您当前的代码总是被提交的原因是，表单的 submit 事件总是被触发，无论表单是否有效。通过使用 submitHandler，jQuery 验证可以控制在验证表单有效性后是否提交表单。

- Rory McCrossan

---

好的，我发现问题是你需要执行$(form).serialize();否则它不会起作用 :) - silentw

Answer 2

在您的提交处理程序中尝试添加以下代码：

$('form#form-utilizadores').submit(function(e){
    e.preventDefault();
    if($(this).valid() == false){
        return;
    }
    .
    .
    .

- Salman A

---

谢谢您的快速回答和另一种解决方法，但我想Rory的答案才是正确的方式 :) - silentw

Answer 3

如果您的验证失败，请从提交中返回false。

- Jeff Watkins