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

Posted 2023-05-09

【中文标题】为啥我需要在提交按钮上单击两次才能提交我的表单？

【英文标题】：Why I need to click twice on the submit button to submit my form?为什么我需要在提交按钮上单击两次才能提交我的表单？

【发布时间】：2015-10-27 17:11:50

【问题描述】：

我有一个使用 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");
     
 );

【参考方案1】：

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

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

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

---

现在是这样的：

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

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

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

【讨论】：

我尝试在表单已经过验证但尚未提交时调用 track_form ......它搞砸了验证并且跟踪也是错误的。跟踪正常事件然后等待是什么意思？你能给我一个代码吗，我对jquery还很陌生。谢谢

@coce 我的意思是调用mixpanel.track 并传入一个回调，就像这样：mixpanel.track("Created Account", function () continueFormSubmission(); )。当 Mixpanel 确认接收到事件时，回调将被触发，因此离开当前页面是安全的。

@coce 单独调用mixpanel.track_forms 不会跟踪事件。它的作用是监听 DOM 上的“提交”事件，然后在提交表单时跟踪事件。当您使用track_forms时，您必须在提交表单之前设置跟踪，否则直接使用mixpanel.track。

对不起，马特，我真的不明白你...我现在使用的代码 mixpanel.track_forms 跟踪事件。我可以在混合面板中看到动作。唯一的问题是我必须按两次按钮......正如我所说的我是 jquery 的初学者，所以我不确定在哪里以及如何实现你编写的代码。感谢您的帮助！

好的，我想通了...感谢马特的帮助。这有效：submitHandler: function(form) mixpanel.track("Created Account"); form.submit(); 谢谢！