Bootstrap JS 验证器和表单提交

Question

我正在为我的引导表单使用这个引导验证器 github.com/1000hz/bootstrap-validator，但似乎无法在提交表单之前设置一些外部 JS 条件。

例如，我想从外部 JS 文件中执行以下操作：

1 # 如果表单或表单的某些输入使用验证器（）无效，那么我会执行一些操作。

2 # else 用户将看到一些引导按钮加载消息，直到所有内容都提交到数据库中。

您可以在这里单独处理一个案例：

$('button[data-loading-text]').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.blockUI();

 // #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button.
 // #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases.
});        

http://jsfiddle.net/temgo/k07nx06k/12/

任何帮助都将不胜感激，因为插件事件似乎仅针对特定字段设置，而不是针对完整表单验证。

问候

Answer 1

查看 1000hz 页面上的活动部分。 (http://1000hz.github.io/bootstrap-validator/#validator-events)

如果您想在验证之前启动操作 - 只需监听事件即可。

$('#someFormId').on('validate.bs.validator', function(){
    doSomeStuff();
});

编辑

事件的问题在于它在每个字段之后被触发。据我所知，这个插件不提供完成成功验证的事件。

Answer 2

为了你的ref希望对你有帮助

$(document).ready(function () {

 $('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        message: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('Done');
    }
});

});

Answer 3

我在寻找其他东西时遇到了这个问题，但我一直在努力实现您想要实现的目标。

我的解决方案是使用插件作者提供的代码 sn-p 来绑定到提交按钮

$('#form').validator().on('submit', function (e) {
  if ( !e.isDefaultPrevented() ) {
    // put your conditional handling here. return true if you want to submit
    // return false if you do not want the form to submit
  }
});

希望对某人有所帮助。

Answer 4

$(function () {
     $("#myForm").validator();

     $("#myButton").click(function (e) {
         var validator = $("#myForm").data("bs.validator");
         validator.validate();

         if (!validator.hasErrors()) 
         {
              $("myForm").submit();
         } else 
         {
              ...
         }
     }
})

希望对你有所帮助。

Answer 5

我正在努力使用这个表单验证器 js 插件进行更好的编码。

按照我的代码自己尝试一下：

// Select every button with type submit under a form with data-toggle validator
$('form[data-toggle="validator"] button[type="submit"]').click(function(e) {
    // Select the form that has this button
    var form = $(this).closest('form');
    // Verify if the form is validated
    if (!form.data("bs.validator").validate().hasErrors()) {
        e.preventDefault();
        // Here go the trick! Fire a custom event to the form
        form.trigger('submitted');
    } else  {
        console.log('Form still not valid');
    }
});

// And in your separated script, do the following:
$('#contactForm').on('submitted', function() {
    // do anything here...
})

考虑以下 HTML 代码：

<form id="contactForm" action="/contact/send" method="POST" data-toggle="validator" role="form">
    <div class="form-group has-feedback">
        <label for="inputName" class="control-label">Name:</label>
        <input type="text" name="inputName" id="inputName" class="form-control" data-error="Your input has an invalid value"/>
        <span class="help-block with-errors"></span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-success">Send</button>
    </div>
</form>

Answer 6

您可以使用 valid.bs.validator 来传递事件，以便在验证表单后执行某些操作。

问候！