javascript - 表单提交前的 jQuery 验证

Question

嘿，我正在尝试使用 Ajax 验证表单。

当验证正确时，我希望提交表单。

否则我想显示反馈等。

但有时我会陷入无限循环或表单无法提交。

如何解决此问题？

//Find Sign form
var sign_form = $("#sign_form");

//User submits Sign form
sign_form.submit(function(e) {
    e.preventDefault();

    var $this = $(this);

    var form = $(this).serializeArray();
    var formObj = {};
    $.each(form,
        function(i, v) {
            formObj[v.name] = v.value;
        });

    //Post Form data to Sign
    $.post("./ajax/sign.php", formObj, function(data, status) {
        var fdb = data.messages;
        if(data.status == "success") {

            console.log("validate is TRUE");
            $this.submit();

            return true;
        } else {

            if(fdb.emailaddress != null) {
                $("#fdb_emailaddress").html(fdb["emailaddress"]);
            }

            console.log("validate is FALSE");
            return false;
        }
    });

    console.log("validate ended: we should not see this");
});

Answer 1

当然，submissionn 会陷入无限循环 - 因为您在绑定(bind)到 Submit() 的函数内触发了 Submit()...;-)您必须以某种方式保存“已进行验证”的信息，例如通过数据属性或 data()，然后对此使用react。例如:

//Find Sign form
var sign_form = $("#sign_form");

//User submits Sign form
sign_form.submit(function(e) {

  var $this = $(this);
  if($this.data("validated") === true) return true;

  e.preventDefault();

  var form = $(this).serializeArray();
  var formObj = {};
  $.each(form,
    function(i, v) {
        formObj[v.name] = v.value;
    });

  //Post Form data to Sign
  $.post("./ajax/sign.php", formObj, function(data, status) {
    var fdb = data.messages;
    if(data.status == "success") {

        console.log("validate is TRUE");
        $this.data("validated", true);
        $this.submit();

        return true;
    } else {

        if(fdb.emailaddress != null) {
            $("#fdb_emailaddress").html(fdb["emailaddress"]);
        }

        console.log("validate is FALSE");
        return false;
    }
  });

  console.log("validate ended: we should not see this");
});