使用表单外部的按钮提交表单并触发jQuery验证

Question

我正在使用jQuery验证插件，表单使用ajax来提交表单。 我有一个浮动按钮栏，根据页面的用途生成页面按钮。 这些按钮位于表单标记之外。 我的表单的ID是帐户设置。 在我的文件中。我有这个：

$("#account-settings").validate({
        rules: {
              email: {email: true}
               },

         messages: {
                      email: {email: "Enter a valid email address."}
               },
    })

有一个名为savesettings的按钮可以保存表单的设置。 这是点击事件：

$('#savesettings').click(function() {  

 if($('#account-settings').valid()){
    alert("Valid form");
}
else{
    alert("Not valid");
}
}

当我点击按钮时没有任何反应...所以，基本上，我显然没有正确使用插件，有人启发我吗？ 继续阅读文档，但我没有看到任何其他内容......

Answer 1

您需要在用户单击按钮时序列化表单。

$('#savesettings').click(function() {  

 var $as = $('#account-settings');

 if($as.valid()){

    $.post(
        /* your server page */
      , $as.serialize()
      , /* your callback function */
    );

  }

  else{
    alert("Not valid");
  }

});

我应该指出以这种方式提交表单的明显可访问性陷阱，没有JavaScript的用户将无法使用它。

Answer 2

如果您想使用该表单之外的任何按钮提交表单，您应该使用trigger()函数，如下所示：

$('body').on('click', '#my-button', function(){
    $('#account-settings').trigger('submit');
});

然后，您的验证插件应该正常运行。

Answer 3

你的JS函数可以使用结束语。 尝试类似的东西：

$('#savesettings').click(function() {  
  if($('#account-settings').valid()){
    alert("Valid form");
  } else {
    alert("Not valid");
  }
});