Question

我正在使用此Bootstrap Plugin，我只想在表单验证后立即显示确认提交消息（JSFiddle）。

该插件的开发人员注意到以下内容：

当表单无效时，会在提交时调用.preventDefault（）事件。因此，如果你想挂钩到提交事件并做有条件地根据表格是否有效，你可以检查事件.isDefaultPrevented（）。请务必提交在您的表单上初始化插件后绑定处理程序。

所以经过几次尝试后我才刚刚发布了这段代码（不起作用）：

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    $('button').click(function(){
        $('.alert').hide()
    }) 
  } else {
    $('button').click(function(){
        $('.alert').show()
    }) 
  }
})

我到底错过了什么？

更新

由于@Nikhil Nanjappa提供了解决方案，我提出了另一个问题，因为联系表单重新加载内容，消息显示为一毫秒（JSFiddle Updated）。有没有办法阻止这种行为？

UPDATE2

为了使其正常工作，我刚刚在“submit”事件中添加了表单提交，并添加了return false，因此代码如下所示：

$('#form').on('valid.bs.validator', function(){
    $('button').click(function(){
        $('.alert').show()
             return false;
    }) 
    $('.alert').delay(3000).fadeOut( "slow" );

});

Answer 1

在提交处理程序中，您必须显示或隐藏警报。但是在您的代码中，您正在注册按钮click的事件侦听器。它只是注册事件而不会触发警报。更改代码如下

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {

        $('.alert').hide()

  } else {

        $('.alert').show()

  }
})

Answer 2

在您提供的相同链接引用中，我发现了此事件here。

valid.bs.validator - 当表单字段变为有效时会触发此事件。提供了以前的字段错误。

$('#someFormId').on('valid.bs.validator', function(){
    showTheMessage();
});

简单干净。您不必全部使用if else循环。

<强>更新

您需要进行一些更改：

首先validator.js甚至没有在Fiddle中工作，因为它通过http协议调用URL，而JSFiddle应该是https，所以更改validator.js的外部资源URL到https://1000hz.gi...。
其次，我看到的表格有2个id。保持你的使用（formulario-cdb）。
这是重新加载的罪魁祸首，没有任何提交处理程序表单已提交，因此它只表示“发送按钮”的类型为submit。将其更改为type="button"

现在，您可以看到警报显示并坚持在那里，无需重新加载页面。

验证联系表单后显示消息 - Bootstrap验证

2 个答案: