bootstrapValidator男篮世界杯赔率 重新启用提交按钮
分类:计算机教程

bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效。如何重新启用提交按钮呢?

最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。

下面一句代码可以实现启用提交按钮:

下面记录一下使用中学习到的相关API,不定期更新。

$('#loginForm').bootstrapValidator('disableSubmitButtons', false); 

1. 获取validator对象或实例

下面看下Bootstrap中点击后禁用按钮的最佳方法

 一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:

为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮。

 1) 

具体实现方法如下:

// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
//禁用button
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually   functionally
//禁用类型为button的input按钮
$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually   functionally
//禁用超链接
$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。

将上面方法写入点击事件中即可,如:

2) 

$(".btn-check").click(function () {
      $('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually   functionally
    });
$(form).bootstrapValidator(methodName, parameters);

js按钮点击后几秒内不可用

 这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
 两种方式的使用分别如下:

function timer(time) {
 var btn = $("#sendButton");
 btn.attr("disabled", true); //按钮禁止点击
 btn.val(time <= 0 ? "发送动态密码" : (""   (time)   "秒后可发送"));
 var hander = setInterval(function() {
 if (time <= 0) {
  clearInterval(hander); //清除倒计时
  btn.val("发送动态密码");
  btn.attr("disabled", false);
  return false;
 }else {
  btn.val(""   (time--)   "秒后可发送");
 }
 }, 1000);
}
//调用方法
timer(30);
// The first way
$(form)
  .data('bootstrapValidator')
  .updateStatus('birthday', 'NOT_VALIDATED')
  .validateField('birthday');

// The second one
$(form)
  .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
  .bootstrapValidator('validateField', 'birthday');

以上所示是小编给大家介绍的bootstrapValidator 重新启用提交按钮的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

2. defaultSubmit()

您可能感兴趣的文章:

使用默认的提交方式提交表单,调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。

使用:

$('#defaultForm').bootstrapValidator({
 fields: {
   username: {
 message: 'The username is not valid',
 validators: {
   notEmpty: {
  message: 'The username is required and can't be empty'
   }
 }
   }
 },
 submitHandler: function(validator, form, submitButton) {
   // a)
   // Use Ajax to submit form data
   //$.post(form.attr('action'), form.serialize(), function(result) {
 // ... process the result ...
   //}, 'json');

   //b)
   // Do your task
   // ...
   // Submit the form
   validator.defaultSubmit();
 }
});

3. disableSubmitButtons(boolean) 

启用或禁用提交按钮。BootstrapValidator里默认的提交按钮是所有表单内的type属性值为submit的按钮,即[type="submit"]。
使用:

当登录失败时,重新启用提交按钮。

$('#loginForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {
      $.post(form.attr('action'), form.serialize(), function(result) {
        // The result is a JSON formatted by your back-end
        // I assume the format is as following:
        // {
        //   valid: true,     // false if the account is not found
        //   username: 'Username', // null if the account is not found
        // }
        if (result.valid == true || result.valid == 'true') {
          // You can reload the current location
          window.location.reload();

          // Or use Javascript to update your page, such as showing the account name
          // $('#welcome').html('Hello '   result.username);
        } else {
          // The account is not found
          // Show the errors
          $('#errors').html('The account is not found').removeClass('hide');

          // Enable the submit buttons
          $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
        }
      }, 'json');
    },
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: 'The username is required'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: 'The password is required'
          }
        }
      }
    }
  });

 4. enableFieldValidators(field, enabled)

启用或禁用指定字段的所有校验。这里我的实

验结果是如果禁用了校验,好像对应的字段输入(文本框、下拉等)也会变为禁用。
使用:

本文由美洲杯赔率发布于计算机教程,转载请注明出处:bootstrapValidator男篮世界杯赔率 重新启用提交按钮

上一篇:探讨如何在php168_cms中提取验证码 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 探讨如何在php168_cms中提取验证码
    探讨如何在php168_cms中提取验证码
    复制代码 代码如下: 复制代码 代码如下: ?php function yzImg($nmsg){  if (function_exists('imagecreatetruecolor')){   $imstr[0]["s"]=$nmsg[0];   $imstr[1]["s"]=$nmsg[1];   $imstr[2]["s
  • 浅析SVN常见问题及解决方法
    浅析SVN常见问题及解决方法
    问好(新加入的资源): --这说明该文件是项目中新增文件资源,新增资源可以是文件、图片、代码等。 LINK Address : http://blog.csdn.net/niu_hao/article/details/6774471 米
  • 详解Vue.js入门环境搭建
    详解Vue.js入门环境搭建
    vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓:
  • javascript 中的继承实例详解,javascript实例男篮世
    javascript 中的继承实例详解,javascript实例男篮世
    javascript 中的继承实例详解 javascript 中的继承实例详解,javascript实例 javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式
  • 剖析 【美洲杯赔率】rudy 访问控制
    剖析 【美洲杯赔率】rudy 访问控制
     前面,我们说Ruby没有函数,只有方法.而且实际上有不止一种方法.这一节我们介绍访问控制(access controls).   局部变量由小写字母或下划线(_)开头.局部变量