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

---

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

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 验证控制是否发布表单，这取决于它的有效性。