为什么我需要在提交按钮上单击两次才能提交我的表单？

Question

我有一个使用 jquery 验证的表单，一旦提交，我想调用一个函数（track_forms 函数以使用 Mixpanel 跟踪它）。

它工作正常，除了一件事：我必须点击两次按钮才能提交表单。第一次单击没有任何作用。我想使用 submitHandler 有问题，因为问题是在实现之后出现的。

有人知道是什么问题吗？

谢谢

  $.validator.addMethod(
    'ContainsAtLeastOneNumber',
    function (value) { 
        return /[0-9]/.test(value); 
    },  
    'Please enter at least 8 characters containing numbers and letters.'
);

$.validator.addMethod(
    'ContainsAtLeastOneLetter',
    function (value) { 
        return /[a-z]/.test(value); 
    },  
    'Please enter at least 8 characters containing numbers and letters.'
);


$('#signupForm').validate({    
rules: {
    email: {
        required: true,
        email: true
    },
    password: {
        minlength: 8,
        ContainsAtLeastOneNumber: true,
        ContainsAtLeastOneLetter: true,
        required: true
    },
    confirmPassword: {
        required: true,
        equalTo: "#password"
    },
    terms: {
        required: true,
    }
},
messages: {
    email: "Please enter a valid email address.",
    password: {
      required: "Please enter at least 8 characters containing numbers and letters.",
      minlength: "Please enter at least 8 characters containing numbers and letters.",
    },
    confirmPassword: {
      required: "Please enter at least 8 characters containing numbers and letters.",
      equalTo: "The passwords are not matching.",
    },
    terms: {
        required: "You must agree with our Terms of Service.",
    },
},
highlight: function(element) {
    var id_attr = "#" + $( element ).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
},
unhighlight: function(element) {
    var id_attr = "#" + $( element ).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
},
errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if (element.attr('name') == 'terms' ) {
        error.insertAfter(".some-class");
        } else {
        error.insertAfter(element);
        }
    },
submitHandler: function(form) {
 mixpanel.track_forms("#signupForm", "Created Account");
    } 
 });

Answer 1

您不应该在 submitHandler 内部调用 track_forms。

在提交表单时调用submitHandler，但调用track_forms 不会跟踪表单已提交。

track_forms 在表单的submit 事件上设置一个新的处理程序。然后，当您单击提交按钮时，它会触发 Mixpanel 事件，然后继续提交表单。

---

现在是这样的：

1. 提交并验证表单，然后调用submitHandler
2. submitHandler 设置 Mixpanel 表单跟踪
3. ？？？ [阻止提交表单]
4. 您再次单击该按钮，Mixpanel 会跟踪它

但我不完全理解第 3 步中发生的情况，即第一个表单没有被提交。

您可以尝试在单击提交按钮之前调用 track_forms。但是，使用 Mixpanel 的 track_forms 可能会干扰您的验证功能。如果可以，最好只跟踪submitHandler 内的正常事件，然后等待继续提交，以确保事件已被跟踪。